javascript - eventos - Evento de desplazamiento de captura en el desbordamiento: elemento oculto

escuchador de eventos en javascript

Question

¿Alguna información sobre cómo detectar un evento de desplazamiento en un elemento que tiene un desbordamiento: oculto? Me gustaría desplazarme en una columna sin mostrar una barra de desplazamiento al usuario.

Answer 1

Esto es en realidad un proceso bastante profundo. Lo que hago es establecer indicadores globales cuando el mouse del usuario ingresa y deja el elemento que desea desplazar. Luego, en el evento de la rueda del ratón para el cuerpo, compruebo si el indicador MOUSE_OVER es verdadero y luego detiene la propagación del evento. Esto es para que el cuerpo principal no se desplace en caso de que toda la página tenga un desbordamiento.

Tenga en cuenta que con el desbordamiento oculto, la capacidad de desplazamiento predeterminada se pierde, por lo que debe crearla usted mismo. Para hacer esto, puede configurar una escucha de rueda en el ratón en su div en cuestión y usar la propiedad event.wheelDelta para verificar si el usuario se está desplazando hacia arriba o hacia abajo. Este valor es diferente según el navegador, pero generalmente es negativo si se desplaza hacia abajo y es positivo si se desplaza hacia arriba. A continuación, puede cambiar la posición de su div en consecuencia.

Este código es hackeado rápidamente pero esencialmente se vería así ...

var MOUSE_OVER = false;
$(''body'').bind(''mousewheel'', function(e){
  if(MOUSE_OVER){
    if(e.preventDefault) { e.preventDefault(); } 
    e.returnValue = false; 
    return false; 
  }
});

$(''#myDiv'').mouseenter(function(){ MOUSE_OVER=true; });
$(''#myDiv'').mouseleave(function(){ MOUSE_OVER=false; });

$(''#myDiv'').bind(''mousewheel'', function(e){
  var delta = e.wheelDelta;
  if(delta > 0){
    //go up
  }
  else{
    //go down
  }
});

Answer 2

Utilizo overflow: scroll, pero también posiciono Absolutamente un div sobre la barra de desplazamiento para ocultarlo.

Answer 3

$("body").css("overflow", "hidden")

$(document).bind(''mousewheel'', function(evt) {
    var delta = evt.originalEvent.wheelDelta
    console.log(delta)
})

funciona para mi. adaptado de ¿Cómo obtengo la propiedad wheelDelta?

Answer 4

$("div").on(''wheel'', function (e) {
        if (e.originalEvent.deltaY < 0) {
        console.log("Scroll up");
    } else {
        console.log("Scroll down");
    }
});

Esto hizo el truco para mí. JSFiddle

StackFiddle:

$("div").on(''wheel'', function(e) {
  if (e.originalEvent.deltaY < 0) {
    console.log("Scroll up");
  } else {
    console.log("Scroll down");
  }
});

div {
  height: 50px;
  width: 300px;
  background-color: black;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>