如何使用jQuery/JavaScript检测触摸板滚动

Question

我正在构建网页。它看起来像单个页面，但我正在处理sections.On点击按钮控件我隐藏所有部分，并显示在屏幕上的特定部分。 所以，我可以做同样的控制与鼠标垫上下滚动吗？我已经在谷歌检查，我无法得到适当的解决方案。 如果这个问题已经发布，请给我提供参考链接。

Answer 1

可以使用scroll event来响应用户的滚动，像这样：

$("#target").scroll(function(event) { 
    console.log("scroll event received:", event); 
}); 

注意，滚动事件非常频繁触发，所以，如果你做任何事情，使浏览器的工作辛苦，你应该小心扼杀事件，即确保您每x毫秒左右执行一次代码。

如果您只想在滚动停止后执行代码，请使用I have this fiddle for you。

function checkf(predf, callback, ms) { 
    window.setTimeout(function() { 
     if (predf()) { 
      callback(); 
      return; 
     } 
     checkf(predf, callback, ms); 
    }, ms); 
} 

function afterScrollStops(func) { 
    var ms = 100, // interval to perform the scroll position check 
     oldX = $(document).scrollLeft(), 
     oldY = $(document).scrollTop(); 

    function startf() { 
     $(document).one("scroll", function() { 
      checkf(function() { 
       var newX = $(document).scrollLeft(), 
        newY = $(document).scrollTop(), 
        stoppedScrolling = newX === oldX && newY === oldY; 

       oldX = newX; 
       oldY = newY; 

       return stoppedScrolling; 
      }, function() { 
       func(); 
       startf(); 
      }, ms); 
     }); 
    } 

    startf(); 
} 

afterScrollStops(function() { 
    console.log("user stopped scrolling"); 
}); 

在本例中，传递给afterScrollStops用户已经停止滚动之后执行功能的回调函数。