检测用户是否正在滚动

use*_*010 74 javascript

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

Wam*_*sen 77

这工作:

window.onscroll = function (e) {  
// called when the window is scrolled.  
} 
Run Code Online (Sandbox Code Playgroud)

编辑:

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

userHasScrolled = false;
window.onscroll = function (e)
{
    userHasScrolled = true;
}
Run Code Online (Sandbox Code Playgroud)

然后在你的Interval插入这个:

if(userHasScrolled)
{
//do your code here
userHasScrolled = false;
}
Run Code Online (Sandbox Code Playgroud)

  • @ user1365010这个答案是(在它的核心)你能做的最好的. (5认同)
  • @ user1365010:是什么?你在说什么?您需要在问题中添加更多详细信息. (4认同)

Osc*_*car 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;
 });
Run Code Online (Sandbox Code Playgroud)

另一个例子:

$(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);
    });
});?
Run Code Online (Sandbox Code Playgroud)

  • 是不是jQuery应该抽象出浏览器的差异?为什么你有不同浏览器的方法?是`$('#elem').bind('scroll'`还不够好?编辑:没关系,我看到了你的第二个例子. (2认同)
  • **警告:**此答案中的车轮事件是非标准的并且已弃用.使用`wheel`事件. (2认同)

小智 6

如果你想检测用户何时滚动到某个div,你可以这样做:

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

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

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

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


Sil*_*own 5

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

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

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