Evento de desplazamiento de captura en desbordamiento: elemento oculto

Question

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

Answer 1

Esto es realmente un proceso un tanto en profundidad. Lo que hago es establecer indicadores globales cuando el usuario ingresa el mouse y deja el elemento que desea desplazar. Luego, en el evento mousewheel para el cuerpo, compruebo si el indicador MOUSE_OVER es verdadero, luego detengo la propagación del evento. Esto es para que el cuerpo principal no se desplace en caso de que toda la página se haya desbordado.

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 un oyente mousewheel 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 se cortó rápidamente, pero se vería esencialmente como esto ...

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

Uso el desbordamiento: desplazarse, pero también colocar 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 mí. adaptado de How do I get the wheelDelta property?

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>