10
votes

Événement de la molette de la souris sur un autre élément DOM

J'ai une page Web avec DIV défilable dessus. Au-dessus de Scrollabing Div, j'ai absolument positionné Div qui chevauche la moitié de Div défilable.

Lorsque je pose le curseur de la souris sur le défilement, je peux faire défiler la roue de la souris. Mais lorsque je déplace le curseur sur le curseur sur DIV, la molette de la souris arrête de défiler de la molette que DIV (et c'est un comportement correct car l'absolu positionné DIV n'est pas à l'intérieur de DIV défilable).

Question: Comment Evénement de défilement de passation ou d'expédition reçue par Absolute positionné Div à ce sous-jacent défilé Div pour rendre cet absolu positionné Div 'Transparent' pour les événements de la molette de la souris.

Je pourrais le faire travailler en chrome, mais pas dans IE et Firefox . Comment réécrire ce code pour le faire fonctionner dans IE et Firefox? xxx

Voir exemple ici: http://jsfiddle.net/hac4k/5

édité: ceci question est à l'origine de jqGrid - colonnes figées ne réagissent pas défilement de molette de la souris

Dans Chrome et Firefox propriété CSS impressionnant est pris en charge:. pointer-events: none < / p>


0 commentaires

5 Réponses :


3
votes

ressemble à un problème connu avec jQuery: originaleVent non pris en charge dans IE


1 commentaires

Ici jsfiddle.net/hac4k/5 est mis à jour la version sans originaleVent



3
votes

La réponse courte: vous utilisez des paramètres incorrects de initwheelevent dans La démo dans cas d'utilisation Internet Explorer. La méthode doit avoir 16 paramètres décrits dans La documentation . YO Utilisez actuellement seulement 11 paramètres les mêmes qui ont initwebkitwheelevent , mais la signification de tous les paramètres de initwheelevent est absolument une autre. Vous devez corriger les paramètres de initwheelevent .


1 commentaires

Voici la version modifiée JSFIDDLE.net/hac4k/5 avec des paramètres de cette documentation et sans utilisation originale. J'ai essayé de nombreux ensembles de paramètres différents et sans succès.



1
votes

Je me rends compte que ce n'est pas exactement ce que vous recherchez, mais au moins dans Chrome, IE7 + et Firefox 3,5+, cela fait ce que vous demandez - faites défiler la DIV sous-jacente lorsque la div les recouverte de DIV reçoit des événements de défilement:

http://jsfiddle.net/b9chris/ym3qs/ p>

Ça fait Donc, simplement parce que la DIV qui se chevaucheux est un enfant de la Div, il se chevauche - pas de jQuery qui passe sur des événements de la souris (bien qu'il écoutant de faire défiler pour assurer que la div se chevauchant reste là où elle doit être). P>

Mise en œuvre Ce type de solution de contournement dans JQGRID peut nécessiter de corrompre un peu de code là-bas, cependant. p>

html: p> xxx pré>

CSS: p>

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


0 commentaires

1
votes

Utilisez RetargetMousesCroll (conteneur de chevauchement, conteneur de défilement) < / code>.


3 commentaires

Cette bibliothèque ne fonctionne que pour la cible fenêtre , pas pour HTMelement. Mais après l'édition, il devient travailler. Ce n'est pas une véritable redirection mais proche de celle-ci - au moins cette bibliothèque calcule correctement la quantité de changement de défilement dans les pixes - il n'y a donc aucune différence d'apparence entre les parties de gauche et droite.


Au fait, les modifications sont les suivantes: à la ligne 34, remplacez la ciblewindow.scrollby (0, le scrollocount); avec {if (ciblewindow.scrollby) ciblewindow.scrollby (0, scrollocount); sinon si (Targewindow.scrollbylines) Targetwindow.scrollbylines (ScrollonsLoundlines); sinon ciblewindow.scrolltop = ciblewindow.scrolltop + scrollocount; }


Merci, je vais regarder en ajoutant cela à la bibliothèque.



-2
votes

Voici la solution 2019 pour le conteneur superposé pour obtenir l'événement de roue: xxx

de cette façon, l'élément chevauché obtient l'événement de la roue à partir du se chevauchant élément appelé .overlap .


0 commentaires