Question

我将Angular 7与插件this配合使用，并且编写的代码如下：

<div class="card ps-mid">
<div class="row" *ngFor="let comment of res.cmt">
    <div class="col">
        <ul class="collection z-depth-1">
            <li class="collection-item avatar">
                <div class="row">
                    <div class="col l2">
                        <img src="images/yuna.jpg" alt="" class="circle"
                            *ngIf="comment.IMAGE != null">
                    </div>
                    <div class="col l10">
                        <span class="title">{{comment.COMMENT}}</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

const ps = new PerfectScrollbar('.ps-mid', { suppressScrollX: true })
document.querySelector('.ps-mid').addEventListener('ps-y-reach-end', () => {
  ps.update();
});

现在使用上面的代码我正在页面加载时寻找滚动条将滚动到div的底部，这是行不通的。需要帮助才能完成这项工作。尝试了多种资源来解决此问题，但没有用，因此几乎不需要帮助。

Answer 1

在初始化插件之前，您尝试在div底部滚动。

ngOnInit() {
  setTimeout(() => {
    // Scroll to bottom on div.
    var element = document.getElementById("ps-mid");
    element.scrollTop = element.scrollHeight - element.clientHeight;

    const ps = new PerfectScrollbar('#ps-mid', { suppressScrollX: true })
      document.querySelector('#ps-mid').addEventListener('ps-y-reach-end', () => {
      ps.update();
    });
  }, 1);
}

然后稍微更改您的HTML。

<div class="card" id="ps-mid"> 
   // Your Code
 </div>

尝试使用此示例https://stackblitz.com/edit/angular-aavuuh

完美滚动条onload滚动到按钮并使用无穷大滚动

1 个答案: