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;
});

但由于CSS，$(window)不是相关元素。

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滚动页面。

检测具有禁用橡皮筋效果的页面中的滚动方向

2 个答案: