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

Question

我正在转换网站,虽然我想使用用户的滚动尝试作为转换启动器,但我不希望有一个窗口滚动条.

现在,我只是检测到用户滚动(我的窗口大小比滚动条的用户屏幕高1px,尽管这是我试图避免的)jquery的

.scroll(function)

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

如何才能做到这一点？

我知道凌乱的补丁可能性:

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

Answer 1

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

仅适用于Firefox:

$('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');
    }
});

您必须将它绑定在跨越整个浏览器屏幕的元素上.

Answer 2

TreeTree的答案可以简化为一个支持所有浏览器的功能.结合mousewheel和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');
    }
});

Answer 3

现代解决方案依赖于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
  }
});