Javascript 捕获“向下滚动”事件？

Capturing the "scroll down" event?

提问by Artemix

I'm designing a very simple web page (HTML only), the only "feature" I want to implement is to do something when the user scrolls down the page, is there a way to capture that "event" somehow?

我正在设计一个非常简单的网页（仅限 HTML），我想要实现的唯一“功能”是在用户向下滚动页面时执行某些操作，有没有办法以某种方式捕获该“事件”？

采纳答案by stecb

Just for completeness, there's another solution using another JS framework (Mootools)

为了完整起见，还有另一个使用另一个 JS 框架（Mootools）的解决方案

window.addEvent('scroll',function(e) {
    //do stuff
});

回答by Anthony Grist

If you don't want to use jQuery (which you might not do for a very simple HTML page), you can accomplish this using regular Javascript:

如果您不想使用 jQuery（对于非常简单的 HTML 页面，您可能不会这样做），您可以使用常规 Javascript 来完成此操作：

<script>
function scrollFunction() {
    // do your stuff here;
}

window.onscroll = scrollFunction;
</script>

You mentioned that you wanted to do something when they scroll downthe page - the onscroll event fires off scrolling in any direction, in either the x- or y-axis, so your function will be called any time they scroll.

你提到，你想做些什么，当他们滚动下来的页面-的onscroll事件触发关闭滚动在任何方向，无论是在X或Y轴，所以你的函数会被他们滚动任何时候。

If you really want it to only run your code when they scrolled down the page, you'd need to preserve the previous scroll position to compare against whenever onscroll gets called.

如果您真的希望它仅在他们向下滚动页面时运行您的代码，则您需要保留以前的滚动位置，以便在调用 onscroll 时进行比较。

回答by Chuck Callebs

You can't do it with just HTML, you'll need to use Javascript. I recommend using jQuery, so your solution can look like this:

你不能只用 HTML 来做，你需要使用 Javascript。我建议使用jQuery，因此您的解决方案可能如下所示：

$(document).ready(function() {
    $(window).scroll(function() {
      // do whatever you need here.
    });
});

If you don't want or are unable to use jQuery, you can use the onscrollsolution posted by Anthony.

如果您不想或无法使用jQuery，则可以使用onscrollAnthony 发布的解决方案。

回答by Joe Ng'ethe

A better way is to not only check for scroll events but also for direction scrolling like below;

更好的方法是不仅检查滚动事件，还要检查方向滚动，如下所示；

$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
    console.log('Scroll up');
}
else {
    console.log('Scroll down');
}
});

回答by sajad saderi

u can simply use this

你可以简单地使用这个

window.addEvent('scroll',function(e) {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            // enter code here
        }
});

回答by darrell

/**
 * This function will determine if a client mousewheel is scrolling up or down.
 */
  //window.addEventListener("load", eScroll);

  function eScroll() {

      window.addEventListener('mousewheel', (event)=> {

        let originalEvent = event.wheelDeltaY;

        if (event.wheelDeltaY >= 0) {
            console.log('Scroll up');
        }
        else {
            console.log('Scroll down');
        }
    });
  }

  window.addEventListener("load", scrollDown);

  function scrollDown() {

      window.addEventListener('mousewheel', (event)=> {

     if (event.wheelDeltaY <= 0) {
        console.log(event.wheelDeltaY);
        console.log('Mousewheel has scrolled down');
      }
   })
  }

  window.addEventListener("load", scrollUp);

  function scrollUp() {

      window.addEventListener('mousewheel', (event)=> {

      if (event.wheelDeltaY > 0) {
        console.log(event.wheelDeltaY);
        console.log('Mousewheel has scrolled up');
      }
  })

  }

回答by davood rafiee

Check if the user scrolled up and simply return

检查用户是否向上滚动并返回

window.addEventListener(
  "scroll",
  e => {
    const scrolled = window.scrollY; // Number of pixels the user has scrolled
    let lastScrolled = 0; // Number of pixels the user has scrolled in the last event

    // If the user scrolls down, the scrolled value goes up and vice versa
    // So basically
    if (scrolled < lastScrolled) {
      // Then the user scrolled up!
      console.log("GET OUT! YOU SCROLLED UP!");
      // But you should update the lastScrolled value nonetheless
      lastScrolled = scrolled;
      return; // And then get out!
    }
    lastScrolled = scrolled; // The value gets updated in any case
    // And your code goes here
  },
  false
);

回答by Alvin Lau

This works for me.

这对我有用。

var previousPosition

$(window).scroll(function(){
  var currentScrollPosition=$(window).scrollTop() + $(window).height()
  if (currentScrollPosition>previousScrollPosition) {
    console.log('down')
  }else if(currentScrollPosition<previousScrollPosition){
    console.log('up')
  }
  previousScrollPosition=currentScrollPosition
});