ionic2：<ion-scroll>，如何滚动到带有 .ts 文件中代码的最后一个元素？

Question

以下代码是html段：

<ion-scroll scrollX="true" style="height: 4rem;overflow: scroll; white-space: nowrap;" no-padding *ngIf="treeId" class="bg-style">
        <div *ngFor="let p of progressArray; let i = index;" class="tree-progress">
            <button ion-button clear [color]="getTextColor(i)" class="tree-progress-item">
                {{ p }}
            </button>
            <ion-icon class="tree-progress-arrow" name="ios-arrow-forward-outline" color="arrowColor" *ngIf="checkLast(i)"></ion-icon>
        </div>
</ion-scroll>

好吧，水平滚动，我想控制滚动滚动到最后一个位置(最后一个元素(时数组进度数组自动添加。但是我找不到 api 提供的任何方法。

然后我在我的项目中使用了 https://github.com/flesler/jquery.scrollTo 的javascript库。

首先，我下载了这个带有npm库

npm install jquery.scrollto --save

然后我import 'jquery.scrollto'

然后我做了这样：

ionViewDidLoad() {
    var mainScroll = document.getElementsByClassName('scroll-content')[0];
    var last = mainScroll.firstElementChild.lastElementChild;
    $('.scroll-zoom-wrapper').scrollTo(last, 200);
}

它不起作用。请帮我解决这个问题，或者准备好示例以便我参考。

谢谢大家！

Answer 1

我是这样解决这个问题的：

ionViewDidLoad() {
    var mainScroll = document.getElementsByClassName('tree-progress-item');
    var length = mainScroll.length;
    console.log('mainScroll-->' + mainScroll + " length-->" + length);
    if (length > 0) {
        var last = mainScroll[length - 1];
        last.scrollIntoView(true);
    }
}