当鼠标位于固定 div 顶部时滚动底层 div 的方法？答案

【问题标题】：A way to scroll an underlying div when mouse is on top of a fixed div?当鼠标位于固定 div 顶部时滚动底层 div 的方法？
【发布时间】：2019-12-21 04:59:04
【问题描述】：

这个问题太长了，想出一个总结它的标题很棘手。

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

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

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

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

我制作了一个简单的 jsFiddle here，为了您的方便，我删除了我尝试过的所有 JavaScript。

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你要找的是pointer-events: none;

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

#fixed {
  pointer-events: none;
}

DEMO

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

【讨论】：

啊，忘记说了。固定的 div 不是用来装饰的，它确实有一些与鼠标相关的功能，我不能失去。无论如何，很好的答案，即使它不能解决我的问题，我敢肯定它对其他人有用。
请注意，这也不是完全跨浏览器。
确实 - 目前不支持 IE 或 Opera (caniuse.com/#feat=pointer-events)
+1，没听说过，说不定会派上用场
有人知道它是否有助于提高动画性能，特别是 FPS，例如如果我用这篇文章中提出的方法禁用页面上大多数元素的交互？附：我说的是 Parallax 网站上的常见问题。

【解决方案2】：

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 Demo - 滚动！

【讨论】：

这很酷，但是我怎样才能让滚动更流畅呢？

【解决方案3】：

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

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

它也显示在jsFiddle。

【讨论】：

这个方案确实更优雅，更易读。我更愿意将其视为已接受的答案。
这个解决方案不一定更优雅，它只是使用 jQuery - 但对这两个答案都投赞成票，这就是我来这里的目的！
优雅地说，我指的是我的答案中的代码行数更少（并且可以说是更好的可读性）。至于 jQuery——我已经用它标记了这个问题，另一个答案也使用了它。两种解决方案似乎都有效；自行决定使用它们:)

【解决方案4】：

虽然接受的答案肯定会为您提供所需的结果，但自然滚动的流畅度和通过设置 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);

【讨论】：