检测滚动[重复]答案

【问题标题】：Detect scrolling [duplicate]检测滚动[重复]
【发布时间】：2016-04-08 01:24:16
【问题描述】：

我可以用 JS 或 jQuery 检测滚动运动吗？

我试图仅在用户滚动时隐藏 div，并且当他停止滚动时显示 div。

我试过了：

window.onscroll(function () {
  $('.footerGeral').hide();
});

但它不起作用。

【问题讨论】：

看看这个 --> stackoverflow.com/questions/5515551/…
这肯定不同于stackoverflow.com/questions/3701311/…。 @jribeiro 希望在用户停止滚动时再次显示该对象。

标签： javascript jquery scroll

【解决方案1】：

你几乎是对的，但它是.scroll()：

$(window).scroll(function () {
  $('.footerGeral').hide();
});

你可以用纯 JavaScript 做到这一点，这样：

window.onscroll = function () {
  document.querySelectorAll(".footerGeral")[0].style.display = 'none';
}

注意：这仅在您有内容时才有效，而不仅仅是视图。带有滚动条的页面。

【讨论】：

这将如何处理滚动结束时的显示 div？
@A.T.啊……我不确定。让我想办法。
也许这有帮助 -> stackoverflow.com/questions/3701311/…
@naoxink 我刚想到。

【解决方案2】：

您可能想要使用scroll 事件，如下所示：

window.addEventListener('scroll', function(evt) {});

现在您可以检测用户使用evt.deltaX 和evt.deltaY 滚动了多少像素，或者使用document.body.scrollTop 和document.body.scrollLeft 滚动了多少像素。

【讨论】：

【解决方案3】：

首先：它仅在您确实有溢出内容（带有滚动条）时才有效。如果您只是滚动，您将不会收到该事件。

二、原生语法为：

window.onscroll = function () {
  // Your code
};

jQuery 方法是：

$(window).scroll(function () {
   // Your code
});

【讨论】：

【解决方案4】：

您可以轻松地将 JQuery scroll() 与 Ben Alman 的 jquery.ba-throttle-debounce.js 中的 debounce() 结合使用。

$(window).scroll($.debounce( 250, true, function(){
    $('.footerGeral').hide(); //scrolling or scrolling stopped for less than 250 ms
}));
$(window).scroll($.debounce( 250, function(){
    $('.footerGeral').show(); //scrolling stopped for more than 250 ms
}));

【讨论】：