Question

我有一个带有可滚动div的网页。在可滚动div的顶部，我绝对定位了div，它与可滚动div的一半重叠。

当我将鼠标光标放在可滚动的div上时，我可以用鼠标滚轮滚动它。但是当我将光标移动到重叠的div上时，鼠标滚轮会停止滚动该div（这是正确的行为，因为绝对定位的div不在可滚动的div内）。

问题：如何将绝对定位div接收的滚动事件传递或调度到此基础可滚动div，以使此绝对定位div对于鼠标滚轮事件是“透明的”。

我可以在Chrome中使用它，但不能在IE和Firefox中使用。 如何重写此代码以使其在IE和Firefox中运行？

if ($.browser.webkit) {    
    $(".overlap-container").bind("mousewheel", function (e) {

        var origEvent = e.originalEvent;
        var evt = document.createEvent("WheelEvent");
        evt.initWebKitWheelEvent(
        origEvent.wheelDeltaX,
        origEvent.wheelDeltaY,
        window,
        0,
        0,
        0,
        0,
        origEvent.ctrlKey,
        origEvent.altKey,
        origEvent.shiftKey,
        origEvent.metaKey);

        $(".scroll-container").get(0).dispatchEvent(evt);
    });
}

见这里的例子： http://jsfiddle.net/HAc4K/5

已编辑：此问题最初来自jqGrid - 冻结列不会对鼠标滚轮进行滚动。

在Chrome和Firefox中支持很棒的CSS属性：pointer-events:none

Answer 1

看起来像jQuery的一个已知问题：OriginalEvent not supported in IE

Answer 2

简短回答：如果使用Internet Explorer，您在the demo中使用initWheelEvent的错误参数。该方法应具有the documentation中描述的16个参数。哟当前只使用了11个具有initWebKitWheelEvent的参数，但initWheelEvent的所有参数的含义绝对是另一个。您必须修复initWheelEvent。

的参数

Answer 3

我意识到这并不是你想要的，但至少在Chrome，IE7 +和Firefox 3.5+中这就是你所要求的 - 当div覆盖它时接收底层div接收滚动事件：

http://jsfiddle.net/b9chris/yM3qs/

这样做只是因为重叠的div是它重叠的div的子节点 - 没有jquery传递任何鼠标滚轮事件（虽然它正在侦听滚动以确保重叠的div保持在它需要的位置）。

然而，在jqGrid中实现这种解决方法可能需要在那里使用相当多的代码。

HTML：

<div id=under>
    (content goes here)
    <div id=over></div>
</div>

CSS：

#under {
    position: absolute;
    left: 0; top: 0;
    width: 220px; height: 200px;
    overflow-y: scroll;
}

#over {
    position: absolute;
    left: 1px; top: 100px;
    width: 200px; height: 100px;
    z-index: 2;
}

JS：

(function() {
    $('#under').on('scroll', function() {
        $('#over').css('top', $(this).scrollTop() + 100);
    });
})();

Answer 4

使用RetargetMouseScroll (overlap container, scroll container)。

Answer 5

这是2019年用于重叠容器获取车轮事件的解决方案：

document.querySelector('.overlap').on('wheel', (e) => {
  const overlap = e.target

  overlap.style.pointerEvents = 'none'
  setTimeout(() => {overlap.style.pointerEvents = 'auto'}, 0)
})

通过这种方式，重叠元素从名为.overlap的重叠元素获取滚轮事件。

在另一个DOM元素上调度鼠标滚轮事件

5 个答案: