CODEWITHSUNDEEP
javascriptnode.jsangular
Debabrata Sahoo
Debabrata Sahoo

Reputation: 143

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

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.

Upvotes: 1

Views: 4986

Answers (1)

shajan
shajan

Reputation: 630

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

Upvotes: 3

Related Questions