85

我如何在javascript中检测用户是否在滚动？

javascript

— 用户名
source

不，我要从另一个函数编写if(scolling)。是if(window.onscroll)一样的吗？

— user1365010

您可以scrolling在中设置onscroll。（ps：不，那不一样）

— 火箭Hazmat 2012年

3

用户从不“滚动”。只有滚动动作，没有滚动状态。

— 肯德尔·弗雷

1

@ user1365010：D'OH！我没想到。您到底想做什么？为什么需要知道用户是否在滚动？

— 火箭Hazmat 2012年

2

有趣。我从未“重启”过纸卷。关心详细吗？

— 肯德尔·弗雷

86

这有效：

window.onscroll = function (e) {  
// called when the window is scrolled.  
}

编辑：

您说这是TimeInterval中的一个函数。
请尝试这样做：

userHasScrolled = false;
window.onscroll = function (e)
{
    userHasScrolled = true;
}

然后在您的时间间隔内插入以下内容：

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}

— Wampie Driessen
source

但这是setInterval中的一个函数！

— user1365010

4

@ user1365010：什么？你在说什么？您需要为问题添加更多细节。

— 火箭Hazmat 2012年

6

@ user1365010这个答案（在其核心）是您可以做的最好的事情。

— Matt Ball

#FYI，当容器滚动时，body.scroll（）正常工作，所以它似乎不起作用，所以我同时添加了两者，

— Selva Ganapathi

12

您刚刚在标签中说了JavaScript，所以@Wampie Driessen的帖子可以为您提供帮助。

我也想贡献一点，因此如果需要，您可以在使用jQuery时使用以下内容。

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e){
     if(e.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.wheelDelta< 0) {
         //scroll down
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

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

另一个例子：

$(function(){
    var _top = $(window).scrollTop();
    var _direction;
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        if(_top < _cur_top)
        {
            _direction = 'down';
        }
        else
        {
            _direction = 'up';
        }
        _top = _cur_top;
        console.log(_direction);
    });
});

— 奥斯卡·贾拉（Oscar Jara）
source

2

jQuery是否不应该抽象出浏览器差异？为什么有针对不同浏览器的方法？是$('#elem').bind('scroll'不是不够好？编辑：没关系，我看到了你的第二个例子。

— 火箭Hazmat 2012年

1

偶尔使用一些本地javascript没什么不对。

— AGDM 2014年

不是e.originalEvent.wheelDelta || e.originalEvent.detail吗

— JacobRossDev '16

2

警告：此答案中的车轮事件是非标准且已过时。使用wheel事件。

— 亚历山大·奥玛拉

我还没有测试过，但是根据MDN的说法，大多数浏览器都不支持

— DOMMouseScroll

6

window.addEventListener("scroll",function(){
    window.lastScrollTime = new Date().getTime()
});
function is_scrolling() {
    return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
}

将500更改为您认为用户“不再滚动”的上一个滚动事件之后的毫秒数。

（addEventListener这比onScroll因为前者可以与使用的任何其他代码很好地共存更好onScroll）。

— 西拉斯·布朗
source

0

使用间隔检查

您可以设置一个时间间隔以继续检查用户是否滚动，然后相应地执行一些操作。

从伟大的约翰·雷格（John Resig）的文章中借来的。

例：

    let didScroll = false;

    window.onscroll = () => didScroll = true;

    setInterval(() => {
        if ( didScroll ) {
            didScroll = false;
            console.log('Someone scrolled me!')
        }
    }, 250);

查看现场示例

— hitautodestruct
source