检测滚动

Detect scrolling

本文关键字：滚动 检测      更新时间：2023-09-26

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

我试图只在用户滚动时隐藏div，而当他停止滚动时，div会显示出来。

我试过了：

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

但是它不起作用。

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

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

你可以在纯JavaScript中这样做：

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

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

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

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

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

首先：只有当您的内容（带有滚动条）溢出时，它才有效。如果你只是滚动，你将不会得到事件。

第二，原生语法是：

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

jQuery方法是：

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

您可以从Ben Alman的JQuery.ba-throttle-debounce.js中轻松地将JQuery scroll()与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
}));
相关文章：