javascript 当鼠标位于固定 div 顶部时滚动底层 div 的方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13494850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A way to scroll an underlying div when mouse is on top of a fixed div?
提问by Antti29
The question is so long that coming up with a title that summarises it proved tricky.
这个问题太长了，想出一个总结它的标题被证明是棘手的。
So anyway. I have a divthat has overflow: autoand that frequently does flow over so the scrollbar appears. Then I have a divthat has position: fixedand is positioned on top of the content div.
所以无论如何。我有一个div，overflow: auto并且经常流过所以滚动条出现。然后，我有一个div具有position: fixed和定位在内容之上div。
Now when I have a fixed-positioned divover 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在 html 正文本身上有一个固定位置时，当我将鼠标悬停在div. 没有前面提到的那么幸运div。
Is there a way to scroll the div"through" the fixed-positioned one?
有没有办法滚动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.
我注意到即使在固定的 div 上捕捉滚动事件也不容易；除非固定 div 本身是可滚动的，否则不会触发该事件。
I made a simple jsFiddle hereand for your convenience stripped it of all the JavaScript I tried.
我在这里做了一个简单的 jsFiddle ，为了您的方便，我把它去掉了我尝试过的所有 JavaScript。
Edit: I need to retain other mouse functions with the fixed div so turning pointer-events off isn't the solution in my case.
编辑：我需要使用固定 div 保留其他鼠标功能，因此在我的情况下关闭指针事件不是解决方案。
回答by Andy
What you are looking for is pointer-events: none;
你要找的是 pointer-events: none;
This makes the pointer not interact with that div essentially, so just do
这使得指针本质上不会与那个 div 交互，所以就这样做
#fixed {
pointer-events: none;
}
And you will get your desired outcome with no JS required. This will stop all other interaction with the div though, if you need to interact with it for some reason I'm afraid you'll have to look into a JS solution.
您将获得所需的结果，无需 JS。不过，这将停止与 div 的所有其他交互，如果您出于某种原因需要与它进行交互，恐怕您将不得不研究 JS 解决方案。
回答by Steffan Donal
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 演示- 滚动！
回答by Antti29
I came up with a more elegant solution, however as it was Ruirize's answer that got me to the right track I gave him the accept tag.
我想出了一个更优雅的解决方案，但是因为 Ruirize 的回答让我走上了正确的道路，所以我给了他接受标签。
$('#fixed').on('mousewheel DOMMouseScroll', function(event) {
$('#content').scrollTop($('#content').scrollTop() - (event.originalEvent.wheelDelta || -event.originalEvent.detail*30));
});
It is also displayed at jsFiddle.
它也显示在jsFiddle。
回答by Sam McDuffie
While the accepted answer definitely will get you the result you need, there is a noticeable difference in the smoothness of scrolling naturally and the scrolling triggered by setting scrollTop.
This utilizes the best parts of pointer-events: none;without actually removing the ability to interact with your fixed elements.
虽然接受的答案肯定会让你得到你需要的结果，但自然滚动的平滑度和通过设置 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);
