How to get clientHeight in Angular?

Question

I tried to get client height when I scroll page:

@HostListener('window:scroll', ['$event']) onScrollEvent($event) {
   if ($event.scrollHeight - $event.scrollTop === $event.clientHeight) {
    console.log('scrolled to the end');
  }
});

I need to detect if user scrolled to the end of page

`document.documentElement.clientHeight` ? – Niloct Jan 25 '19 at 15:46 — Niloct, Jan 25 '19 at 15:46

jo_va · Accepted Answer · 2019-01-25T16:38:28.497

I think you can do it like this (see this post for other solutions, and this article for this solution):

@HostListener("window:scroll") onWindowScroll() {
    let scroll = window.pageYOffset ||
                 document.documentElement.scrollTop ||
                 document.body.scrollTop || 0;

    const max = document.documentElement.scrollHeight -
                document.documentElement.clientHeight;

    if (scroll === max) {
        alert('Bottom');
    }
}

See the Stackblitz demo here

score 1 · Answer 2 · answered Jan 25 '19 at 15:37

1

To get the height:

 var height = $window.innerHeight;

answered Jan 25 '19 at 15:37

Eric Svitok

792
5
11

I dot use JQUERY – POV Jan 25 '19 at 15:39
1

This isn't using jQuery. $window is a part of angular. So you should compare your scroll height to the window height. – Eric Svitok Jan 25 '19 at 15:47
Okay, then how to replace this code: `if ($event.scrollHeight - $event.scrollTop === $event.clientHeight) { console.log('scrolled to the end'); }`? – POV Jan 25 '19 at 15:52
I need to detect if user scrolled to the end of page – POV Jan 25 '19 at 15:54
if ($window.scrollY + $window.innerHeight >= document.body.scrollHeight) { // end of page } – Eric Svitok Jan 25 '19 at 15:56

How to get clientHeight in Angular?

2 Answers2