Angular - Scroll Event only page scroll

Question

I need to check scroll event for a "show more" features.

Im using:

window.addEventListener('scroll', this.scroll, true);

and this code:

scroll = (event: any): void => {
        const number = event.srcElement.scrollTop;

        this.show_scroll_top = false;
        if (event.target.scrollTop >= 500) {
            this.show_scroll_top = true;
        }

        if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight) {
              this.showMorFunctionFoo();
        }

    };

Unfortunally the scroll listen to every scroll in page, for example a scroll inside a DropDown etc...

How can I listen ONLY the PAGE scroll ignoring everyelse?

Pilpo · Accepted Answer · 2021-03-19 16:20:03Z

3

One solution might be to use hostListener from Angular (https://angular.io/api/core/HostListener) in your page component

@HostListener('scroll', ['$event']) 
onScroll($event:Event):void {
   ... your logic here
};

or you could use something like that

scroll = (event: any): void => {
    if (event.target.getAttribute('id') === YOU_PAGE_HTML_ID) {
       ... your logic here
    } 
};

answered Mar 19, 2021 at 16:20

Pilpo

1,2961 gold badge9 silver badges19 bronze badges

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

1 Comment

EviSvil Over a year ago

Thank you. It works with this workaround: if (event.target.tagName === "MAT-SIDENAV-CONTENT") ...

Collectives™ on Stack Overflow

Angular - Scroll Event only page scroll

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related