How to detect if a div has hit the browser top/bottom in Angular 4

Question

There are answers for this question for JQuery(which I want to avoid in current project) and Angular1(which I don't understand).

you can use jquery alongside with angular, if you prefer not to do it - this task is for native js, not angular - like document.querySelect("#yourDiv") — happyZZR1400, Jun 11 '17 at 06:28
Possible duplicate of [Javascript: How to detect if browser window is scrolled to bottom?](https://stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom) — TheUnreal, Jun 11 '17 at 06:40

score 0 · Answer 1 · answered Jun 11 '17 at 08:30

We had the same problem. We used this in our Constructor using window.onscroll:

window.onscroll = () => {
let status = 'not reached';
const windowHeight = 'innerHeight' in window ? window.innerHeight
  : document.documentElement.offsetHeight;
const body = document.body, html = document.documentElement;
const docHeight = Math.max(body.scrollHeight,
  body.offsetHeight, html.clientHeight,
  html.scrollHeight, html.offsetHeight);
const windowBottom = windowHeight + window.pageYOffset;
if (windowBottom >= docHeight) {
  status = 'bottom reached';
  console.log('bottom reached');
  const msg = 'Loading...';
  console.log(msg);
  this.limit = this.limit + 10;
  // Limits added
  // Bootom Reached  here - Write your custom code here
}
return event;
}

Don't forget to nullify the window.onscroll in ngOnDestroy():

ngOnDestroy(): void {
window.onscroll = null;
}

Alternatively(only for mobile) , if you are using hammerjs you can use swipe up/down. check http://hammerjs.github.io/recognizer-swipe/

How to detect if a div has hit the browser top/bottom in Angular 4

1 Answers1