10

我有一个带有可滚动 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

4

5 回答 5

3

看起来像是 jQuery 的一个已知问题：IE 中不支持 OriginalEvent

于 2013-03-20T11:11:35.837 回答
3

简短的回答：在使用 Internet Explorer 的情况下，您initWheelEvent在演示中使用了错误的参数。该方法应具有文档中描述的 16 个参数。哟目前只有11个参数是一样的initWebKitWheelEvent，但是所有参数的含义initWheelEvent是完全不同的。您必须修复initWheelEvent.

于 2013-03-20T11:26:36.360 回答
1

我意识到这不是您正在寻找的东西，但至少在 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);
    });
})();
于 2013-03-31T21:39:43.243 回答
1

使用.RetargetMouseScroll(overlap container, scroll container)

于 2013-04-01T03:30:51.863 回答
-2

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

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

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

这样，重叠元素从称为 的重叠元素中获取轮子事件。.overlap

于 2019-01-11T17:15:32.453 回答