检测用户是否正在滚动

IT技术 javascript
2021-02-21 01:50:08

如果用户正在滚动,我如何在 javascript 中检测?

5个回答

这有效:

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

编辑:

你说这是一个 TimeInterval 中的函数..
尝试这样做:

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

然后在您的 Interval 中插入:

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}
但它是 setInterval 中的一个函数!
2021-04-18 01:50:08
#FYI,当容器滚动时它似乎没有醒来,body.scroll() 工作,所以我添加了两个,
2021-05-01 01:50:08
@user1365010 这个答案是(本质上)你能做的最好的。
2021-05-12 01:50:08
@user1365010:是什么?你在说什么?您需要为问题添加更多细节。
2021-05-13 01:50:08

您刚刚在标签中说了 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);
    });
});​
jQuery 不是应该抽象出浏览器差异吗?为什么你有不同浏览器的方法?$('#elem').bind('scroll'不是不够好?编辑:没关系,我看到了你的第二个例子。
2021-04-24 01:50:08
时不时使用一点原生 javascript 没有错。
2021-04-29 01:50:08
我还没有测试过这个,但根据 MDN DOMMouseScroll 在大多数浏览器中不受支持developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll
2021-04-29 01:50:08
警告:此答案中的轮子事件是非标准的且已弃用。使用wheel事件。
2021-05-12 01:50:08
你不是说e.originalEvent.wheelDelta || e.originalEvent.detail吗?
2021-05-16 01:50:08
window.addEventListener("scroll",function(){
    window.lastScrollTime = new Date().getTime()
});
function is_scrolling() {
    return window.lastScrollTime && new Date().getTime() < window.lastScrollTime + 500
}

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

addEventListeneronScroll因为前者可以与使用 的任何其他代码很好地共存更好onScroll。)

如果您想检测用户何时滚动到某个div,您可以执行以下操作:

window.onscroll = function() {
    var distanceScrolled = document.documentElement.scrollTop;
    console.log('Scrolled: ' + distanceScrolled);
}

例如,如果您的div在滚动到位置 112 后出现:

window.onscroll = function() {
    var distanceScrolled = document.documentElement.scrollTop;
    if (distanceScrolled > 112) {
      do something...
    }
}

但是正如您所看到的,您不需要div,只需要您希望发生的偏移距离。

使用间隔检查

您可以设置一个时间间隔来继续检查用户是否已经滚动,然后相应地做一些事情。

借用了伟大的John Resig他的文章中

例子:

    let didScroll = false;

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

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

查看现场示例