捕获"向下滚动"事件？

Question

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

Answer 1

如果您不想使用jQuery(您可能不会为非常简单的HTML页面执行此操作),则可以使用常规Javascript完成此操作:

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

window.onscroll = scrollFunction;
</script>

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

如果你真的希望它只在向下滚动页面时运行你的代码,你需要保留前一个滚动位置,以便在调用onscroll时进行比较.

Answer 2

你不能只使用HTML,你需要使用Javascript.我建议使用jQuery,所以你的解决方案看起来像这样:

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

如果您不想或不能使用jQuery,可以使用onscrollAnthony发布的解决方案.

Answer 3

更好的方法是不仅要检查滚动事件,还要检查下面的方向滚动;

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

Answer 4

为了完整起见,还有另一个使用另一个JS框架的解决方案(Mootools)

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

Answer 5

您可以使用该wheel事件来捕获鼠标滚轮事件，因为该mousewheel事件已弃用且非标准。您可以在此处阅读有关轮子事件的更多信息

正如@plusz评论的那样：

不要将滚轮事件与滚动事件混淆

window.onwheel = e => {
  if(e.deltaY >= 0){
    // Wheel Down
    console.log('Down');
  } else {
    // Wheel Up
    console.log('Up');
  }
}