用单涡卷检测滚轮
提问于 2014-12-05 14:11:53
我尝试了几种方法来准确地检测mousewheel / DOMMouseScroll事件，但结果似乎因浏览器而异，最重要的是从硬件到另一个硬件。(例如: MacBook魔术触控板触发了许多鼠标轮事件，等等)
JS库曾多次尝试将wheelDelta事件的mousewheel“规范化”。但是他们中的很多人都失败了(我已经找不到相关的问题了，但也有一些人认为这是失败的原因)。
这就是为什么我现在尝试一个解决方案，而不是-- mousewheel事件，而是onscroll事件。滚动/鼠标轮检测的下面是一个例子，使用滚动(#scroller)的隐藏容器和正常内容的普通容器(#fixed_container)。
由于#scroller有一个有限的高度(这里是4000 As )，我无法无限地检测到滚动/鼠标轮。
如何允许无限滚动事件(通过为#scroller**？设置无限高度)) ?**
代码/ 现场演示：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body { overflow:hidden; }
#scroller { height: 4000px; }
#fixed_container { position:fixed; top:0px; left:0px; }
#text { position:absolute; top:100px; left:100px; }
</style>
<script type="text/javascript">
window.onscroll = function(e) {
console.log("scroll event detected! " + window.pageXOffset + " " + window.pageYOffset);
e.preventDefault();
return false;
}
</script>
</head>
<body>
<div id="scroller"></div>
<div id="fixed_container">
<div id="text">
Bonjour
</div>
</div>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2014-12-05 15:19:37
“如何允许无休止的滚动事件”
这应该可以做到：
$(window).scroll(function() {
var st= $(window).scrollTop();
var wh= $(window).height();
var sh= $('#scroller').height();
if(sh < st+wh*2) {
$('#scroller').css({
height: st+wh*2
});
};
});在IE11、火狐、Chrome、Opera和Safari中进行了测试。
在下面的小提琴中，点击添加文本，这样您就可以看到它滚动：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27325506
复制
腾讯云开发者
