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>

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

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

首先，我使用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);
    }
}

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

1 个答案: