如何检测滚动方向 [英] How to detect scroll direction

问题描述

当有人向下滚动某个元素时，我想运行一个函数。这样的事情：

I want to run a function when someone scrolls down on an element. Something like this:

 $('div').scrollDown(function(){ alert('down') });
 $('div').scrollUp(function(){ alert('up') });

但是这些功能不存在。有解决这个问题的方法吗？ Awwwards 似乎可以做到（导航栏中的徽标根据滚动方向而变化）。不幸的是，源代码已被压缩，因此没有运气...



谢谢！

But those functions don't exist. Is there a solution to this problem? Awwwards seem to be able to do it (logo in navbar changes depending on scroll direction). Unfortunately, the source code is compressed, so no luck there...

Thanks!!

推荐答案

我最终弄清楚了，所以如果有人在寻找答案：

I managed to figure it out in the end, so if anyone is looking for the answer:

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

这篇关于如何检测滚动方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！