Question

问题是如此之长，以至于提出一个总结它的标题被证明是棘手的。

无论如何。我有一个div overflow: auto并经常流过，因此会出现滚动条。然后我有div position: fixed并且位于内容div之上。

现在当我在html主体上有一个固定位置div时，当我将鼠标放在div上时，我可以用滚轮滚动文档。前面提到的div不太幸运。

有没有办法将div“滚动到”固定位置？

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

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

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

Answer 1

您要找的是pointer-events: none;

这使得指针基本上不与该div交互，所以只需执行

#fixed {
  pointer-events: none;
}

DEMO

如果不需要JS，您将获得理想的结果。这将停止与div的所有其他交互，如果你因为某些原因需要与它进行交互，我担心你将不得不考虑JS解决方案。

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

Answer 3

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

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

它也显示在jsFiddle。

Answer 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);

当鼠标位于固定div之上时滚动底层div的方法？

4 个答案: