angular - Hur kan jag använda content.scrollTo() för ion-scroll i ionic2?

Jag försöker scrolla till en fast position, till exempel scrollTo(500, 20). Låt oss säga att du är på en enhet som har en bredd på 300 pixlar. Scrollmålet är nu utanför skärmområdet, du måste scrolla åt höger.

Jag löste detta genom att göra följande:

<ion-content>
    <ion-scroll scrollX="true" style="width:100%; height:100%; white-space: nowrap; ">
        <div style="width:1000px; ">
            [box1] [box2] [box3] [...]
        </div>
    </ion-scroll>
</ion-content>

Hittills är allt bra. Problemet börjar om jag vill hoppa 500 pixlar åt höger genom att trycka på en knapp till exempel. Att svepa åt höger fungerar. Jag vet att det finns en funktion för att göra detta för <ion-content>:

@ViewChild(Content) content: Content;
[...]
this.content.scrollTo(500, 500, 500);

Tyvärr fungerar detta inte i mitt fall. Jag tror att problemet är att innehållet är relaterat till enhetens storlek, så scrollTo()-metoden får ingen effekt på <ion-scoll>. Hur kan jag använda scrollTo()-metoden för <ion-scroll> istället för <ion-content>?

Tack för all hjälp!

Svar #1

Hur kan jag använda scrollTo()-metoden för <ion-scroll> istället för <ion-content>?

Jag jobbar fortfarande på hur man animerar scrollningen, men åtminstone kan detta anses vara en lösning för ditt scenario. Ta en titt på denna plunker.

Eftersom vi inte kan använda ion-content för att scrolla, tänkte jag på att hämta instansen av Scroll, sedan få tillgång till den inre HTML-scroll-elementet, och sedan använda element.scrollLeft-egenskapen för att scrolla på det elementet:

Egenskapen element.scrollLeft hämtar eller anger antalet pixlar som en elements innehåll är rullat åt vänster.

Så i komponentkoden:

import { Component, ViewChild } from '@angular/core';
import { NavController, Content } from 'ionic-angular';

@Component({...})
export class HomePage {
  @ViewChild('scroll') scroll: any;

    constructor() {}

    public backToStart(): void {
      this.scroll.scrollElement.scrollLeft = 0;
    }

    public scrollToRight(): void {
      this.scroll.scrollElement.scrollLeft = 500;
    }

}

Och i vyn:

<ion-content padding>
  <ion-scroll #scroll scrollX="true" style="width:100%; height:150px; white-space: nowrap;">
        <div  style="width:1000px;">
            <div style="display:inline-block;height:100px;width:100px;border:1px solid black;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid red;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid blue;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid green;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid grey;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid brown;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid yellow;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid orange;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid pink;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid violet;"></div>
        </div>
    </ion-scroll>

    <button (click)="backToStart()" ion-button text-only>Go to start</button>
    <button (click)="scrollToRight()" ion-button text-only>Scroll to right!</button>
</ion-content>

Genom att göra this.scroll.scrollElement.scrollLeft=500;, kan vi scrolla innehållet i ion-scroll 500px åt höger. Vi kan sedan gå tillbaka till början igen genom att göra this.scroll.scrollElement.scrollLeft=0;.

Svar #2

Genom innehållsskrollning

@ViewChild(Content) content: Content;
  this.content.scrollTo

Med id #scroll

@ViewChild('scroll') scroll: any;  
this.scroll.scrollElement.scrollLeft = 500;

Den ovanstående metoden fungerar bra för vertikal rullning upp och ner, men i fallet med horisontell rullning/scrollX fungerar det inte, så med nedanstående kod löser jag mitt problem. Hoppas det kan vara till hjälp för dig.

TypeScript

scrollmain(elementId, index) {
   console.info('elementId', elementId)
   var el = document.getElementById(elementId);
   el.scrollIntoView({ behavior: "smooth" });
}

HTML

<ion-scroll #scroll scrollX="true" style="width:100%;white-space: 
          nowrap; height: 60px">
    <ion-segment *ngIf="mcqdata" color="appmaincolor">
        <ion-segment-button *ngFor="let mcq of mcqdata; let i=index;" [id]="mcq.ques_id" value="{{mcq.ques_id}}" (ionSelect)="scrollmain(mcq.ques_id,i)"
            [ngClass]="{'active': selectedIdx == i}">
            <strong>Queastion{{i+1}}</strong>
        </ion-segment-button>
    </ion-segment>
</ion-scroll>

Relaterade artiklar