Способ прокрутки базового div, когда мышь находится поверх фиксированного div?

Вопрос настолько длинный, что придумать название, которое суммирует его, оказалось сложным.

Так или иначе. У меня есть div, который имеет overflow: auto, и это часто происходит, поэтому появляется полоса прокрутки. Тогда у меня есть div, который имеет position: fixed и расположен поверх содержимого div.

Теперь, когда у меня есть фиксированное расположение div по самому телу html, я могу прокручивать документ с помощью колеса, когда наводил указатель мыши на div. Не так повезло с вышеупомянутым div.

Есть ли способ прокрутить div "через" фиксированную позицию?

Я заметил, что даже захват события прокрутки, когда над фиксированным div непросто; событие не запускается, если только фиксированный div сам прокручивается.

Я сделал простой jsFiddle здесь и для вашего удобства разделил его со всеми JavaScript, которые я пробовал.

Изменить: мне нужно сохранить другие функции мыши с фиксированным div, поэтому выключение указателей-событий не является решением в моем случае.

Ответы

Ответ 1

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 - прокрутите!

Ответ 2

То, что вы ищете, pointer-events: none;

Это приводит к тому, что указатель не взаимодействует с этим div по существу, поэтому просто

#fixed {
  pointer-events: none;
}

DEMO

И вы получите желаемый результат без необходимости JS. Это остановит все другие взаимодействия с div, хотя, если вам нужно взаимодействовать с ним по какой-то причине, я боюсь, вам придется задуматься о решении JS.

Ответ 3

Я придумал более элегантное решение, однако, поскольку это был ответ Ruirize, который привел меня к правильному пути, я дал ему тег accept.

$('#fixed').on('mousewheel DOMMouseScroll', function(event) {
    $('#content').scrollTop($('#content').scrollTop() - (event.originalEvent.wheelDelta || -event.originalEvent.detail*30));
});

Он также отображается на jsFiddle.