Un moyen de faire défiler une div divise lorsque la souris est au dessus d'une division fixe?

La question est si longue que de proposer un titre qui résume cela s'est avéré difficile.

De toute façon. J'ai un div qui a overflow: auto et qui coule fréquemment pour que la barre de défilement apparaisse. Ensuite, j'ai un div qui a une position: fixed et est positionné au dessus de la div contenu.

Maintenant, quand j'ai un divisé div sur le corps html lui-même, je peux faire défiler le document avec la roue lorsque j'ai ma souris sur la div . Pas trop chanceux avec la div ci-dessus.

Existe-t-il un moyen de faire défiler la div "à travers" la position fixe?

J'ai remarqué que même la capture de l'événement de défilement sur le div fixe n'est pas facile; L'événement n'est pas déclenché à moins que le div fixe lui-même ne soit en mode défilant.

J'ai fait un jsFiddle simple ici et pour votre commodité, je l'ai dépouillé de tout JavaScript que j'ai essayé.

Edit: J'ai besoin de conserver d'autres fonctions de la souris avec la division fixe afin de déplacer les événements des pointeurs n'est pas la solution dans mon cas.

 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!

Ce que vous recherchez est pointer-events: none;

Cela fait que le pointeur n'interagit pas avec ce div essentiellement, alors faites simplement

 #fixed { pointer-events: none; }

DEMO

Et vous obtiendrez votre résultat souhaité sans JS requis. Cela empêchera toutes les autres interactions avec la division, si vous devez interagir avec elle pour une raison quelconque, je crains que vous ne devriez examiner une solution JS.

Je suis venu avec une solution plus élégante, mais comme c'était la réponse de Ruirize qui m'a mené sur la bonne voie, je lui ai donné l'étiquette d'acceptation.

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

Il est également affiché à jsFiddle .