Question

我尝试了几种方法来准确检测mousewheel / DOMMouseScroll事件，但似乎结果会因浏览器到另一个浏览器而异，尤其是从硬件到另一个硬件。（例如：MacBook Magic Trackpad会发射许多鼠标轮事件等）。

JS库已经有很多尝试来“规范化”wheelDelta事件的mousewheel。但他们中的许多人都失败了（我没有找到相关的SO问题，但有一些指出这种失败）。

这就是为什么我现在尝试解决方案没有 mousewheel事件，而是onscroll事件。使用滚动（#scroller）的隐藏容器和正常内容的普通容器（#fixed_container）进行滚动/鼠标滚轮检测的Here is an example。

由于#scroller的高度有限（此处为4000px），我无法检测到滚动/鼠标滚轮无限地......

如何允许无限滚动事件（通过为#scroller设置无限高度？如何？）？

代码/ Live demo：

<!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>

Answer 1

“如何允许无限滚动事件”

这应该这样做：

$(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，Firefox，Chrome，Opera和Safari中测试过。

在下面的小提示中，单击添加文本，以便您可以看到它滚动：

用onscroll检测鼠标滚轮

1 个答案:

Fiddle