html - onscroll para div

javascript-events

Question

¿Un elemento div no tiene un controlador de eventos onscroll ? El comportamiento en mi página no parece indicar que se haya reconocido el controlador de eventos div onscroll .

<div id=''bd'' onscroll=''alert("Scroll Called");''></div>

También,
¿Los eventos de desplazamiento div se acumulan en eventos de desplazamiento de ventana, según el evento de burbuja de DOM?

Answer 1

Dependiendo de la versión de HTML que esté utilizando, podría usar el evento onwheel , en su lugar.

El evento onscroll solo funciona si se cumplen todas las siguientes condiciones:

1. El div tiene overflow: auto , overflow: scroll , overflow-y: scroll , etc.
2. El div tiene actualmente una barra de desplazamiento visible que puede desplazarse.
3. El movimiento del ratón hace que la barra de desplazamiento se desplace.

Por lo tanto, el evento onscroll no es realmente adecuado para detectar el movimiento general de la rueda del mouse.

Tenga en cuenta que el evento onwheel es nuevo en HTML 5. Sin embargo, según w3schools , es ampliamente compatible.

Answer 2

JQUERY scroll () puede ayudarte.

$("#gridTableContainer").scroll(function() {
HandlingScrollingStuff();
}); 

Answer 3

Rompí mi cabeza en este también, hasta que empecé a aprender más sobre las directivas DOCTYPE. El atributo onscroll no se admite en la versión más reciente de la especificación HTML. Se mostrará como sintaxis no válida en Visual Studio. Puede funcionar en muchos navegadores, pero sigue siendo un código no válido.

En su lugar, puedes canar evento usando Javascript o jQuery. Uso un método como este para sincronizar el desplazamiento en dos divs separados:

$("#gridTableContainer").scroll(function() {
HandlingScrollingStuff();
}); 

Answer 4

Sé que puede que no sea exactamente lo que estás buscando, pero muchos marcos de javascript pueden ayudarte con esto. No es necesario que el div tenga una barra de desplazamiento para que pueda enganchar a los eventos de desplazamiento.

P.ej. Mootools tiene el evento de mousewheel del mousewheel . Demo aquí . (Tiene barras de desplazamiento, pero puede usar Firebug para quitar las barras de desplazamiento y probar, todavía funciona).

Lo he usado yo mismo en un sitio que hice hace un tiempo. Si se desplaza mientras mantiene el mouse sobre las imágenes, evita que la página se desplace por defecto y, en cambio, desliza la barra de imágenes.

Answer 5

Sí, pero el elemento necesita tener una barra de desplazamiento. Puede asignarle uno con overflow: auto (que le brinda una barra de desplazamiento cuando el contenido es lo suficientemente alto) o overflow: scroll . (Se pueden configurar específicamente para x & y también overflow-y: scroll ...)

Aunque no burbujean una vez que el div se ha desplazado a la parte inferior, la ventana comenzará a desplazarse. (Básicamente, si el div puede desplazarse, interceptará el evento de desplazamiento, pero si no puede, irá a la página)