How to handle events of scroll top\bottom on Angular?

Question

I have a div with virtual scroll items. I want to get events when i scroll on top and when i scroll to bottom.

html:

<div class="col-lg-6 " #scroll id="scrollable" (scroll)="onScroll($event)" du-smooth-scroll>
      <cdk-virtual-scroll-viewport itemSize="14" style="height: 520px; width: 85%;" >
        <li *cdkVirtualFor="let n of lines" class="lazyLogLine">
          {{n}}
        </li>
      </cdk-virtual-scroll-viewport>
</div>

*.ts:

 onScroll = (event): void => {
//handle your scroll here
//this is used to be able to remove the event listener
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log('scrolling ' + this.scrollTop);
if (this.scrollTop > 5) {
  this.showPreviosLog(this.previosLink);
  console.log('scroll top');
}
else {
  console.log('scroll bottom');
}

But, i think it is not valid solution.

i know, that Angular have ScrollDispatcher. Can i use this dispatcher to handle scroll up and bottom? If so, how?

Thank you!

Tony · Accepted Answer · 2021-07-30 11:40:50Z

2

You can try these 2 approach

@ViewChild("scroll", { static: true }) scrollEle: ElementRef;

fromEvent(scrollEle, "scroll")
    .pipe(
        tap()// do something here
    )
    .subscribe();

or

@HostListener("window:scroll", ["$event"])
onScroll(event) {
       
}

edited Jul 30, 2021 at 11:40

answered Jan 29, 2020 at 10:48

Tony

20.3k7 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to handle events of scroll top\bottom on Angular?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related