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

Question

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

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

现在,当我div在html主体本身上有一个固定位置时,当我将鼠标放在上面时,我可以用滚轮滚动文档div.上述不太幸运div.

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

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

我在这里做了一个简单的jsFiddle ,为了您的方便,我尝试了所有的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演示 - 滚动!

Answer 3

我提出了一个更优雅的解决方案,然而正如Ruirize的回答让我走上了正确的轨道,我给了他接受标签.

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

它也显示在jsFiddle.