Perfect-scroll bar onload scroll to buttom and use infinity scroll

Question

I am using Angular 7 with plugin this and the code i have written as below:

<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();
});

Now using above code i am looking for on load of the page the scroll bar will scroll to bottom of the div which is not working. Need help to make this work. tried multiple resources for solving this but no use so required little help.

Answer 1

You try to scroll bottom on the div before initializing the plugin.

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);
}

And change your Html slightly.

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

Try with this example https://stackblitz.com/edit/angular-aavuuh