context - mousemove jquery

jQuery desactivar desplazamiento cuando el mouse sobre un div absoluto

Question

Intento desactivar la función de desplazamiento del mouse de la ventana cuando el mouse está sobre el div, de modo que solo se habilita el desplazamiento de div y cuando el mouse se aleja del div, se vuelve a aplicar el desplazamiento a la ventana. El div está posicionado absolutamente

¿He visto esta publicación usar jquery para desactivar la función de la rueda de desplazamiento del mouse cuando el cursor del mouse está dentro de un div? pero no parece dar ninguna respuesta, de ahí mi pregunta.

Supongo que sería algo como esto (si solo existieran estos métodos):

$(''#container'').hover(function() {
$(window).scroll().disable();
$(this).scroll().enable();
}, function() {
$(window).scroll().enable();
});

Answer 1

Esta ha sido una pregunta popular, así que estoy actualizando para dar una visión general de las respuestas aquí proporcionadas y cuáles pueden ser las mejores para usted. Hay tres soluciones únicas incluidas. Dos son de Amos y uno es de mí mismo. Sin embargo, cada uno opera de manera diferente.

1. Amos - Establecer overflow:hidden en el cuerpo. Esto es simple y funciona genial. Pero las barras de desplazamiento de la ventana principal parpadearán hacia adentro y hacia afuera.
2. Amos: usa javascript para deshabilitar la rueda del mouse. Esto es genial si no necesitas mousewheel en absoluto.
3. Esta respuesta: use javascript para desplazar solo el elemento sobre el que está. Esta es la mejor respuesta si su div interno necesita desplazarse, pero no desea que se desplacen otros divs. El ejemplo de violín muestra esto.

http://jsfiddle.net/eXQf3/371/

El código funciona de la siguiente manera:

• Capturar evento de desplazamiento en el elemento actual
• Cancelar el evento de desplazamiento
• Desplazar manualmente solo el elemento actual

$(''#abs'').bind(''mousewheel DOMMouseScroll'', function(e) {
var scrollTo = null;
if (e.type == ''mousewheel'') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == ''DOMMouseScroll'') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});​

Registro de cambios:

• Soporte de FF
• scrollTo null check para volver al comportamiento predeterminado en caso de que ocurra algo imprevisto
• soporte para jQuery 1.7.

Answer 2

Lo que trato de hacer aquí con mi código es:

• Compruebe si div está sobrevolado o mousado sobre

• Obtener la dirección de desplazamiento

• Compare el ScrollTop con la altura del contenedor y evite desplazarse más cuando se alcanza un máximo o un mínimo (hasta que se apague el moused).

  var hovered_over = false;
  var hovered_control;
  function onCrtlMouseEnter(crtl) { //Had same thing used for mutliple controls
  hovered_over = true; //could be replaced with $(control).onmouseenter(); etc
  hovered_control = crtl; //you name it
  }
  function onCrtlMouseLeave(crtl) {
  hovered_over = false;
  hovered_control = null;
  }
  $(document).on("mousewheel",function(e)
  {
  if (hovered_over == true) {
  var control = $(hovered_control); //get control
  var direction = e.originalEvent.wheelDeltaY; //get direction of scroll
  if (direction < 0) {
  if ((control.scrollHeight - control.clientHeight) == control.scrollTop) {
  return false; //reached max downwards scroll... prevent;
  }
  }
  else if (direction > 0) {
  if (control.scrollTop == 0) {
  return false; //reached max upwards scroll... prevent;
  }
  }
  }
  });

http://jsfiddle.net/Miotonir/4uw0vra5/1/

Probablemente no sea el código más limpio y se puede mejorar fácilmente, pero esto funciona para mí. (control.scrollHeight - control.clientHeight) esta parte es bastante cuestionable para mí, pero debe tener la idea de cómo abordar el problema de todos modos.

Answer 3

No se puede deshabilitar el desplazamiento de ventana, aunque hay una solución simple:

//set the overflow to hidden to make scrollbars disappear
$(''#container'').hover(function() {
$("body").css("overflow","hidden");
}, function() {
$("body").css("overflow","auto");
});

Ver demostración: http://jsfiddle.net/9Htjw/

ACTUALIZAR

Sin embargo, puedes deshabilitar la rueda del mouse.

$(''#container'').hover(function() {
$(document).bind(''mousewheel DOMMouseScroll'',function(){
stopWheel();
});
}, function() {
$(document).unbind(''mousewheel DOMMouseScroll'');
});
function stopWheel(e){
if(!e){ /* IE7, IE8, Chrome, Safari */
e = window.event;
}
if(e.preventDefault) { /* Chrome, Safari, Firefox */
e.preventDefault();
}
e.returnValue = false; /* IE7, IE8 */
}

Fuente: http://solidlystated.com/scripting/javascript-disable-mouse-wheel/

Demostración: http://jsfiddle.net/9Htjw/4/

Answer 4

Utilicé nicescroll en mi página sin método funcionó. Me di cuenta de que el nicescroller está llamando al evento scroll y tuvo que desactivar nicescroll temporalmente al pasar el elemento.

Solución: deshabilite temporalmente nicescroll al pasar un elemento

$(''body'').on(''mouseover'', ''#element'', function() {
$(''body, html'').css(''overflow'', ''auto'').getNiceScroll().remove();
}).on(''mouseout'', ''#element'', function() {
$(''body, html'').css(''overflow'', ''hidden'').niceScroll();
});

Answer 5

mrtsherman: si enlazas el evento de esta manera, el código de amosrivera también funciona para Firefox:

 var elem = document.getElementById ("container");
if (elem.addEventListener) {
elem.addEventListener ("mousewheel", stopWheel, false);
elem.addEventListener ("DOMMouseScroll", stopWheel, false);
}
else {
if (elem.attachEvent) {
elem.attachEvent ("onmousewheel", stopWheel);
}
}