Как я могу использовать content.scrollTo() для ion-scroll в ionic2?
Я пытаюсь прокрутить до фиксированной позиции, например, scrollTo(500, 20). Допустим, вы находитесь на устройстве, ширина которого составляет 300 пикселей. Цель прокрутки теперь выходит за рамки экрана, вам нужно прокрутить вправо.
Я решил это, сделав следующее:
<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>
До здесь все хорошо. Проблема начинается, если я хочу прыгнуть на 500 пикселей вправо, например, нажав кнопку. Смахивание вправо работает. Я знаю, что есть функция, чтобы сделать это для <ion-content>:
@ViewChild(Content) content: Content;
[...]
this.content.scrollTo(500, 500, 500);
Это, к сожалению, не работает в моем случае. Я думаю, что проблема в том, что контент связан с размером устройства, поэтому метод scrollTo() не влияет на <ion-scoll>, Как я могу использовать метод scrollTo() для <ion-scroll> вместо <ion-content>?
Спасибо за любую помощь!
4 ответа
Как я могу использовать метод 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;,
По прокрутке контента
@ViewChild(Content) content: Content;
this.content.scrollTo
По id #scroll
@ViewChild('scroll') scroll: any;
this.scroll.scrollElement.scrollLeft = 500;
Этот вышеописанный метод работает нормально для прокрутки вверх-вниз, но в случае горизонтального /scrollX не работает, поэтому в приведенном ниже коде я разрешаю свое решение, возможно, оно будет полезным для вас.
Машинопись
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>
Чтобы добавить к ответам выше, это будет обрабатывать плавную прокрутку.
Назовите элемент прокрутки в вашем.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' });
Надеюсь, это кому-нибудь поможет.
Вы можете заменить this.content.scrollTo(...) с this.content._scrollContent.nativeElement.scrollTo(...)
Почему бы вам не получить размеры элемента, который вы хотите прокрутить в первую очередь? Присвойте идентификатор вашему ion-scroll в 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 left, top, right, bottom, x, y, width, height, свойства, описывающие рамку в пикселях. Свойства, отличные от ширины и высоты, относятся к верхнему левому углу области просмотра.
Глядя на ваш код, я не думаю, что вам нужна ion-scroll, вы должны иметь возможность просто назначить id для вашего div и получить желаемый результат.