JQuery / JS:检测用户的滚动尝试，没有任何窗口溢出滚动到

JQuery / JS : Detect user's scroll attempt without any window overflow to scroll to

本文关键字：滚动 任何 溢出 窗口 JS 检测 用户 JQuery      更新时间：2023-09-26

我正在开发一个过渡网站，虽然我想使用用户的滚动尝试作为过渡发起者，但我不希望有一个窗口滚动条。

现在，我只是检测到用户滚动（我已经使我的窗口大小比用户屏幕的滚动条高 1px，尽管这是我试图避免的）使用 jquery 的 

.scroll(function)

方法，并使用它来转换我的页面，但我想检测用户的滚动尝试，而不必使我的页面溢出像素，从而显示滚动条

如何做到这一点？

我知道的混乱补丁可能性：

将窗口定位在外部包装器内，并将滚动条隐藏在包装器的溢出中。这是一个修补工作，而不是解决方案。这会导致页面内容偏离中心，因为并非所有浏览器都使用相同的滚动条宽度。

看看这个问题。我用它来作为参考来制作这个小提琴。

仅适用于火狐浏览器：

$('html').on ('DOMMouseScroll', function (e) {
    var delta = e.originalEvent.detail;
    if (delta < 0) {
        $('p').text ('You scrolled up');
    } else if (delta > 0) {
        $('p').text ('You scrolled down');
    }
});

适用于Chrome，IE，Opera和Safari：

$('html').on ('mousewheel', function (e) {
    var delta = e.originalEvent.wheelDelta;
    if (delta < 0) {
        $('p').text ('You scrolled down');
    } else if (delta > 0) {
        $('p').text ('You scrolled up');
    }
});

您必须将其绑定到跨越整个浏览器屏幕的元素上。

来自 TreeTree 的答案可以简化为一个支持所有浏览器的函数。结合鼠标滚轮和 DOMMouseScroll 事件，因为 jQuery 支持一个或多个事件参数。但是，我的测试显示 on（） 在最新的 Firefox 中不起作用。请改用 bind（）。您还可以组合 var delta 声明以支持所有浏览器：

$('html').bind('mousewheel DOMMouseScroll', function (e) {
    var delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail);
    if (delta < 0) {
        console.log('You scrolled down');
    } else if (delta > 0) {
        console.log('You scrolled up');
    }
});

现代解决方案依赖于wheel事件 （IE9+）

$('selector').on('wheel', function(event) {
  var delta = {
    x: event.originalEvent.deltaX, 
    y: event.originalEvent.deltaY
  };
  if (delta.x != 0 || delta.y != 0) {
    //user scrolled
  }
});
相关文章：