javascript - 在禁用橡皮筋效果的页面中检测滚动方向

Question

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body{
    margin: 0;
    min-width: 980px;
    padding: 0; 
    height: 100%;
    width: 100%;
    overflow: auto;
}

这是我用来防止 macos 橡皮筋滚动的 css。我也想检测滚动的方向，向下或向上。

var iScrollPos = 0;
$(window).scroll(function () {
    var iCurScrollPos = $(this).scrollTop();
    if (iCurScrollPos > iScrollPos) {
        console.log('down');
    } else {
        console.log('up');
    }
    iScrollPos = iCurScrollPos;
});

但$(window)不是相关元素，因为 CSS。

Answer 1

尝试这个 ：

html {
  height: 100%;
  width: 100%;
 // overflow: hidden;  -remove this line
}

工作样本

http://jsbin.com/iKaQuzO/1/edit

Answer 2

我找到了一种禁用rubber band滚动并检测滚动方向的解决方案。

jquery.mousewheel.js和这个 js

$('body').bind('mousewheel', function(event, delta, deltaX, deltaY) {
    if(delta > 0 )
       console.log('up');
    else
       console.log('down');
});

注意：它只检测用户是否正在使用mouse wheel滚动页面。