Отправка события колеса мыши на другом элементе DOM

У меня есть веб-страница с прокручиваемым 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

EDITED: Эта проблема изначально связана с jqGrid - замороженные столбцы не реагируют на прокрутку колесика мыши.

В Chrome и Firefox поддерживается свойство awesome CSS: pointer-events:none

Ответы

Ответ 2

Короткий ответ: вы используете неправильные параметры initWheelEvent в демо в случае использования Internet Explorer. Метод должен иметь 16 параметров, описанных в документации. Yo использует в настоящее время только 11 параметров, которые имеют initWebKitWheelEvent, но смысл всех параметров initWheelEvent абсолютно другой. Вы должны исправить параметры initWheelEvent.

Ответ 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);
    });
})();

Ответ 4

Используйте RetargetMouseScroll (overlap container, scroll container).

Ответ 5

Вот решение 2019 года для перекрывающегося контейнера для получения события колеса:

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

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

Таким образом, перекрывающийся элемент получает событие wheel от перекрывающегося элемента, называемого .overlap.