当鼠标在固定div的顶部时，滚动底层div的方法？ [英] A way to scroll an underlying div when mouse is on top of a fixed div?

问题描述

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

The question is so long that coming up with a title that summarises it proved tricky.

无论如何。我有一个 div 有 overflow：auto ，并且经常会流过，所以滚动条出现。然后我有一个 div ，它有 position：fixed ，位于内容 c>。

So anyway. I have a div that has overflow: auto and that frequently does flow over so the scrollbar appears. Then I have a div that has position: fixed and is positioned on top of the content div.

现在当我有一个固定位置的 div 本身，我可以滚动文档与滚轮，当我有我的鼠标在 div 。不是那么幸运与上述 div 。

Now when I have a fixed-positioned div over the html body itself, I can scroll the document with the wheel when I have my mouse over the div. Not so lucky with the aforementioned div.

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

Is there a way to scroll the div "through" the fixed-positioned one?

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

I noticed that even catching the scroll event when over the fixed div isn't easy; the event isn't fired unless the fixed div itself is scrollable.

我做了一个简单的jsFiddle

I made a simple jsFiddle here and for your convenience stripped it of all the JavaScript I tried.

编辑：我需要保留其他鼠标功能与固定的div所以转动指针 - 事件不是我的情况下的解决方案。

I need to retain other mouse functions with the fixed div so turning pointer-events off isn't the solution in my case.

推荐答案

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 - Scroll！

jsFiddle Demo - Scroll!

这篇关于当鼠标在固定div的顶部时，滚动底层div的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！