17

这个问题太长了，想出一个总结它的标题被证明是棘手的。

所以无论如何。我有一个div，overflow: auto它经常流过，所以滚动条出现了。然后我有一个div，它position: fixed位于内容之上div。

现在，当我在 html 正文本身上有一个固定位置div时，当我将鼠标悬停在div. 前面提到的就没有那么幸运了div。

有没有办法滚动div“通过”固定位置的？

我注意到，即使在固定 div 上捕获滚动事件也不容易；除非固定的 div 本身是可滚动的，否则不会触发该事件。

我在这里做了一个简单的 jsFiddle ，为了方便起见，我把我尝试过的所有 JavaScript 都去掉了。

编辑：我需要使用固定的 div 保留其他鼠标功能，因此在我的情况下关闭指针事件不是解决方案。

4

4 回答 4

29

你正在寻找的是pointer-events: none;

这使得指针本质上不与该 div 交互，所以就这样做

#fixed {
  pointer-events: none;
}

演示

您将获得您想要的结果，而无需 JS。不过，这将停止与 div 的所有其他交互，如果您出于某种原因需要与它交互，恐怕您将不得不研究 JS 解决方案。

于 2012-11-21T14:02:49.270 回答
18 
var fixedElement = document.getElementById("fixed");

function fixedScrolled(e) {
    var evt = window.event || e;
    var delta = evt.detail ? evt.detail * (-120) : evt.wheelDelta; //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    $("#content").scrollTop($("#content").scrollTop() - delta);
}

var mousewheelevt = (/Gecko\//i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
if (fixedElement.attachEvent)
    fixedElement.attachEvent("on" + mousewheelevt, fixedScrolled);
else if (fixedElement.addEventListener)
    fixedElement.addEventListener(mousewheelevt, fixedScrolled, false);

jsFiddle 演示- 滚动！

于 2012-11-21T14:40:53.627 回答
12

我想出了一个更优雅的解决方案，但是由于 Ruirize 的回答让我走上了正确的道路，我给了他接受标签。

$('#fixed').on('mousewheel DOMMouseScroll', function(event) {
    $('#content').scrollTop($('#content').scrollTop() - (event.originalEvent.wheelDelta || -event.originalEvent.detail*30));
});

它也显示在jsFiddle。

于 2012-11-22T12:59:02.480 回答
2

虽然接受的答案肯定会为您提供所需的结果，但自然滚动的平滑度和通过设置 scrollTop 触发的滚动存在明显差异。这利用了最好的部分，pointer-events: none;而实际上并没有消除与固定元素交互的能力。

function enableScroll(e) {
  var self = $(this);
  self.css('pointer-events', 'none');
  clearTimeout(this.timer);
  this.timer = setTimeout(function () {
      self.css('pointer-events', 'all');
  }, 100);
}
$('#fixed').on('mousewheel DOMMouseScroll', enableScroll);
于 2019-12-20T20:59:04.040 回答