使用 onscroll 检测鼠标滚轮

Question

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

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

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

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

如何允许无限滚动事件（通过为#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 中测试。

在下面的小提琴中，单击会添加文本，因此您可以看到它滚动：

Fiddle