javascript - event - mousewheel vb6
firefox+jquery mousewheel scroll error de evento (4)
ACTUALIZACIÓN Solución de trabajo según lo sugerido por David (ver a continuación):
reemplazar
$(''.scrollMe'').bind("mousewheel DOMMouseScroll", ...)
con
$(''.scrollMe'').bind("mousewheel DOMMouseScroll MozMousePixelScroll", ...)
POSTE ORIGINAL
Firefox 16.0.2 (último) muestra un problema al enlazar el evento "mousewheel / DOMMouseScroll". Desplazarse con la rueda del mouse mientras el puntero del mouse está en la parte superior de mi div específico hace que la ventana también se desplace, mientras que obviamente no quiero esto.
Intenté agregar varios métodos para detener la propagación, etc. pero nada parece funcionar.
Código 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;
});
});
Para verlo en acción, siga el enlace jsFiddle a continuación. En la página de ejemplo, simplemente coloque el puntero del mouse dentro del div con recuadros rojos y use la rueda de desplazamiento del mouse. Firefox se desplazará por la ventana primaria la primera vez (de forma inesperada), mientras que otros navegadores no lo harán.
Curiosamente, Firefox no repite el comportamiento una vez que activa el evento en el elemento vinculado, lo que significa que deja de desplazarse por la página. Sin embargo, repite este comportamiento después de desplazarse manualmente por la página e intentar nuevamente.
También probé esto en IE9 y Chrome, pero no pude detectar este problema en esos navegadores (lo que significa que no se desplazan por la ventana inesperadamente), así que supongo que es específico de Firefox (también se deshabilitaron todos los complementos en Firefox, etc. )
¿Es esto realmente un error en Firefox (y si es así hay un truco entre navegadores que podría ser el truco)? O, si conoce alguna otra solución para lograr el mismo efecto de atrapar el evento del mouse sin tener que desplazar la ventana de la página, ¡no dude en responder!
Esta respuesta a esta pregunta tiene la solución más compatible con navegadores que he encontrado:
Cómo detectar la dirección de desplazamiento
$(''#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;
});
Leyendo https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll parece que MozMousePixelScroll DOMMouseScroll fue para Firefox 16 o anterior. Para firefox> 17 usa el evento 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;
});
});
No puedo reproducir este error en mi FF 16.01 OSX con un panel táctil (el Fiddle funciona bien), pero sé que hay otro evento específico de MozMousePixelScroll llamado MozMousePixelScroll . Es posible que desee tratar de involucrar a eso también.
También hay más información disponible en MDN: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll
Como nota al margen, creo que detener la acción predeterminada usando e.preventDefault() debería ser suficiente, no es necesario detener las propagaciones también (a menos que haya otros errores específicos de IE).
Esta respuesta es una solución de navegación cruzada en Chrome, Firefox e 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>