web-dev-qa-db-fra.com

firefox + jquery mousewheel bug d'événement de défilement

UPDATECorrectif de travail suggéré par David (voir ci-dessous):

remplacer

    $('.scrollMe').bind("mousewheel DOMMouseScroll", ...)

avec

    $('.scrollMe').bind("mousewheel DOMMouseScroll MozMousePixelScroll", ...)

ORIGINAL POST

Firefox 16.0.2 (dernier) indique un problème lors de la liaison de l'événement "mousewheel/DOMMouseScroll". Faire défiler avec la molette de la souris alors que le pointeur de la souris est au-dessus de mon div cible provoque le défilement de la fenêtre, alors que je ne le souhaite évidemment pas.

J'ai essayé d'ajouter plusieurs méthodes pour arrêter la propagation, etc., mais rien ne semble fonctionner.

Code Javascript:

    $(document).ready(function() {
            $('.scrollMe').bind("mousewheel DOMMouseScroll", function(e) {
                e.stopImmediatePropagation();
                e.stopPropagation();
                e.preventDefault();

                var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

                $(this).empty();    
                return false;
            });
    });

Pour le voir en action, suivez le lien jsFiddle ci-dessous. Sur la page d’exemple, placez simplement le pointeur de la souris à l’intérieur du div avec des cases rouges et utilisez la molette de la souris. Firefox fera défiler la fenêtre parente la première fois (de manière inattendue), contrairement aux autres navigateurs.

Exemple de code jsFiddle

Curieusement, Firefox ne répète pas le comportement une fois l'événement déclenché sur l'élément lié, ce qui signifie qu'il cesse de faire défiler la page. Toutefois, ce comportement se répète après que vous avez fait défiler manuellement la page et que vous avez réessayé.

J'ai également testé cela dans IE9 et Chrome, mais je n'ai pas pu détecter ce problème dans ces navigateurs (ce qui signifie qu'ils ne font pas défiler la fenêtre de manière inattendue). )

Est-ce vraiment un bug dans Firefox (et si c'est le cas, y a-t-il un piratage inter-navigateur qui pourrait faire l'affaire)? Ou, si vous connaissez une autre solution pour obtenir le même effet d'attraper l'événement molette sans avoir le défilement de la fenêtre de la page, n'hésitez pas à y répondre!

javascriptjqueryfirefoxmousewheel
22
L2Eer

Je ne peux pas reproduire ce bogue dans mon OS FF 16.01 à l’aide d’un pavé tactile (le Fiddle fonctionne bien), mais je sais qu’il existe un autre événement spécifique à Mozilla appelé MozMousePixelScroll . Vous voudrez peut-être essayer de le faire aussi.

Il existe également d'autres informations sur MDN: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll

En clair, je pense que stopper l'action par défaut en utilisant e.preventDefault() devrait suffire, pas besoin d'arrêter les propagations également (à moins qu'il y ait d'autres bogues spécifiques à IE).

18
David Hellsing

Reading https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll Il semble que MozMousePixelScroll DOMMouseScroll était pour firefox 16 ou antérieur. Pour firefox> 17, utilisez l'événement wheel.

$(document).ready(function() {
        $('.scrollMe').bind("wheel mousewheel", function(e) {
            e.preventDefault();

            var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

            $(this).empty();    
            return false;
        });
});
5
Salix alba

Cette réponse à cette question a la solution la plus compatible avec les navigateurs que j'ai trouvée:

Comment détecter le sens de défilement

 $('#elem').on( 'DOMMouseScroll mousewheel', function ( event ) { 
    if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
        //scroll down
        console.log('Down');
      } else {
        //scroll up
        console.log('Up');
      }
      //prevent page fom scrolling
      return false;
    });
1
Mr Sorbose

Cette réponse est une solution de crossbrowsing sur Chrome, Firefox et iExplorer 

var handlerMousewheel = function(){
		$(".item").on("wheel mousewheel", function(event) {
			event.preventDefault();
				var deltaY = event.originalEvent.deltaY;
				var wheelDeltaY = event.originalEvent.wheelDeltaY;

				 if( deltaY == 100 && wheelDeltaY == -120 || deltaY > 0 && wheelDeltaY == undefined ) {
			   		$(".wrapper").animate({"margin-left":"0%"},{duration:100});
				 }else if(deltaY == -100 && wheelDeltaY == 120 || deltaY < 0 && wheelDeltaY == undefined){
			      $(".wrapper").animate({"margin-left":"50%"},{duration:100});
				 }
	
		});
	}
  handlerMousewheel();
.container{
  display:block;
  width:100%;
  height:200px;
  overflow-x:hidden;
  overflow-y:scroll;
  background-color: grey;  
}
.wrapper{
  display:block;
  overflow:hidden;
  background-color:#a3cfef;
  padding: 2%;
  width:50%;
  margin:0 auto;
}
.item{
  width:100%;
  height:50px;
  margin:2px 0;
  display:block;
  overflow:hidden;
  border:3px solid #ad08a6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
  </div>
</div>

https://jsfiddle.net/rrubio/ncLjgwy0/

0
Rene Rubio