当滚动位置到达顶部位置时如何点击功能？

Question

When scroll position hit the top position of the document the function is called. How to do that?

Answer 1

Good way to do it is to use the HostListener

@HostListener("window:scroll", [])
onWindowScroll() {
    let scroll = this.window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
    if (number = 0) {
      // Do some stuff here
    }
}

Now I just wanna add that you probably need to account for elastic scroll on mac desktops. Meaning that your scroll position can go in minus, and might not hit 0 exactly when you want this event to fire.

Here is a good blog post about this, if you want more reading material

Answer 2

Use addEventListener on body, and listen for 'scroll' event, then when event is fired check scrollY property of window, and if it is 0, then you are on top.

function yourFunction() {
  console.log('you are on top');
}

window.addEventListener('scroll', () => {
  if (window.scrollY == 0) yourFunction();
}, true);

Answer 3

You can use HostListener to listen to the scroll event

@HostListener("window:scroll", ["$event"])
onWindowScroll() {
 // get scroll postion 
  let number = this.window.pageYOffset || 
  this.document.documentElement.scrollTop || this.document.body.scrollTop || 
  0;

 // here you can check the scroll postion
  if (number > 100) {

  } 
}