2010-06-01 14 views
14

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

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

Además,
hacer Actos div desplazar hacia arriba a eventos desplazamiento de la ventana, como por evento DOM burbujeante?

Respuesta

2

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

Aunque no burbujean una vez que el div se ha desplazado hacia abajo, 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)

+5

Gracias. Pero, tengo el conjunto de propiedades de desbordamiento. Estoy desplazando el div, pero sin recibir ninguna alerta. ¿Qué puedo estar haciendo mal? –

1

Sé que puede no ser exactamente lo que está buscando, pero una gran cantidad de marcos de JavaScript pueden ayudarte con esto. No es necesario que el div tenga una barra de desplazamiento para que se enganche a los eventos de desplazamiento.

Por ejemplo. Mootools tiene el evento mousewheel. Demo here. (Tiene barras de desplazamiento, pero puede usar Firebug para eliminar las barras de desplazamiento y probar - todavía funciona).

Lo he usado yo mismo en un site que hice hace un tiempo. Si se desplaza mientras mantiene presionado el mouse sobre las imágenes, evita que la página predeterminada se desplace y, en su lugar, desliza la barra de imágenes.

12

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

El evento onscroll sólo funciona si todas las condiciones siguientes son verdaderas:

  1. El div tiene overflow: auto, overflow: scroll, overflow-y: scroll, etc.
  2. El div actualmente tiene una barra de desplazamiento visible que puede desplazarse.
  3. El movimiento del mouse 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. According to w3schools, aunque es bastante compatible.

4

Me rasqué la cabeza en esto también, hasta que comencé a aprender más sobre las directivas DOCTYPE. El atributo onscroll no es compatible con 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, puede hacer un evento utilizando Javascript o jQuery. Yo uso un enfoque como este para sincronizar el desplazamiento en dos separados de Div:

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

No debe creer todo lo que Microsoft dice sobre las especificaciones. Les gusta hacer lo suyo y les gusta llamarlos estándares. Y VS te hace sentir como Word, siendo "correcto" y "válido" según MS_. En realidad, solo la MS depende finalmente del DOCTYPE ya sea que haga caprichos o no; todos los demás navegadores simplemente muestran HTML. [Use MDN para aprender HTML, CSS y JS] (https://developer.mozilla.org/en/docs/DOM/window.onscroll)! Nunca use w3schools, lea por qué en [w3fools.com] (http://w3fools.com). MSDN está bien para IE, pero no confíe en ellos. El evento ps: onscroll está especificado en HTML5, sin jQuery. – metadings

+1

Ummm, sí. Eso es lo que estaba diciendo cuando señalé que "todavía no es válido", incluso si Visual Studio lo muestra como válido. – Ripside

0

desplazamiento JQUERY() puede ayudar.

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