javascript - Perfect-scrollbar onload 滚动到底部并使用无限滚动

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