Как я могу использовать content.scrollTo() для ионного свитка в ионном2?

Ответ 1

Как я могу использовать метод scrollTo() для <ion-scroll> вместо <ion-content>?

Я все еще работаю над тем, как анимировать свиток, но, по крайней мере, это может рассматриваться как решение для вашего сценария. Пожалуйста, взгляните на этот поршень.

Поскольку мы не можем использовать ion-content для прокрутки, я хотел получить экземпляр Scroll, затем получить доступ к внутреннему html-элементу scroll и затем использовать свойство element.scrollLeft для прокрутки этого элемента:

Свойство element.scrollLeft получает или устанавливает количество пикселей, на которое содержимое элемента прокручивается влево.

Итак, в коде компонента:

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;
    }

}

И в представлении:

<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>

Делая this.scroll.scrollElement.scrollLeft = 500; мы можем прокрутить содержимое ion-scroll 500px вправо. Затем мы можем снова вернуться к началу, выполнив this.scroll.scrollElement.scrollLeft = 0; ,

Ответ 2

Прокруткой контента

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

По id #scroll

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

Этот вышеописанный метод работает отлично для прокрутки верхнего дна, но в случае, если горизонтальный /scrollX не работает, поэтому под кодом ниже я разрешаю решение может надеяться, что это будет полезно для вас.

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>

Ответ 3

Чтобы добавить к ответам выше, это будет обрабатывать плавную прокрутку.

Назовите элемент прокрутки в вашем.html

<ion-scroll #scroll>

Импортируйте свиток.

import { Scroll } from 'ionic-angular';

Ссылка на скроллер в.ts

@ViewChild('scroll') scroll: any;

Добавьте этот код, где это необходимо:

this.scroll._scrollContent.nativeElement.scrollTo({ left: 0, top: 0, behavior: 'smooth' });

Надеюсь, это кому-нибудь поможет.

Ответ 4

Почему бы вам не получить размеры элемента, который вы хотите прокрутить первым? Назначьте идентификатор вашей ионной прокрутке в html файле, затем вы можете использовать эту функцию:

scrollToElement(id) { 
    var el = document.getElementById(id);
    var rect = el.getBoundingClientRect();
    // scrollLeft as 0px, scrollTop as "topBound"px, move in 800 milliseconds
    this.content.scrollTo(0, rect.top, 800);
}

От эта документация: Возвращаемое значение свойств getBoundingClientRect слева, сверху, справа, снизу, x, y, ширины, высоты, описывающих границу в пикселях. Свойства, отличные от ширины и высоты, относятся к левому верхнему углу окна просмотра.

Глядя на ваш код, я не думаю, что вам нужен ионный прокрутка, вы должны просто назначить id своему div и получить нужный результат.

Ответ 5

Вы можете заменить this.content.scrollTo(...) на this.content._scrollContent.nativeElement.scrollTo(...)