检测禁用橡皮筋效果的页面中的滚动方向
Detect scrolling direction in a page with disabled rubber band effect
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。
试试这个:
html {
height: 100%;
width: 100%;
// overflow: hidden; -remove this line
}
工作示例
http://jsbin.com/iKaQuzO/1/edit
我找到了禁用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
滚动页面。
相关文章:
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- fullpage.js在滚动时更改滚动方向
- 如何使用javascript检测不可滚动元素中的滚动事件和方向
- 滚动功能工作方向错误
- 更改滚动Horz的滑动方向
- 确定适合窗口的页面的滚动方向
- 将页面分成两部分,并将两个部分滚动到相反的方向
- 根据滚动方向和高度加载和删除内容页面
- 鼠标滚轮滚动上的滑块 - 方向右 - 左
- 检测禁用橡皮筋效果的页面中的滚动方向
- 使用jquery在同一方向上连续滚动滑块
- 检查'鼠标滚轮'滚动锁定的事件方向
- 如何在ScrollStart上使用Iscroll获得滚动方向
- 使用setTimeout查找滚动方向
- InternetExplorer9及以下版本,当在主体上使用rtl方向时,将滚动条设置为右侧
- 溢出时移动滚动方向检测:隐藏页面
- 如何在使用溢出后获得滚动方向:自动禁用动量滚动
- 手机上的滚动方向
- 我如何反转滚动方向上的谷歌图表
- 如何确定滚动方向,而不实际滚动