Evento de desplazamiento
Ejemplo
Ejecute un JavaScript cuando se desplaza un elemento <div>:
<div onscroll="myFunction()">
Definición y uso
El evento onscroll ocurre cuando se desplaza la barra de desplazamiento de un elemento.
Sugerencia: use la propiedad de estilo de desbordamiento de CSS para crear una barra de desplazamiento para un elemento.
Compatibilidad con navegador
| Event | |||||
|---|---|---|---|---|---|
| onscroll | Yes | Yes | Yes | Yes | Yes |
Sintaxis
En HTML:
<element onscroll="myScript">
En JavaScript:
object.onscroll = function(){myScript};
En JavaScript, usando el método addEventListener():
object.addEventListener("scroll", myScript);
Nota: el método addEventListener() no es compatible con Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| Burbujas: | No |
|---|---|
| Cancelable: | No |
| Tipo de evento: | UiEvent si se genera desde una interfaz de usuario, Evento de lo contrario |
| Etiquetas HTML compatibles: | <dirección>, <cita en bloque>, <cuerpo>, <título>, <centro>, <dd>, <dir>, <div>, <dl>, <dt>, <conjunto de campos>, <formulario>, <h1 > a <h6>, <html>, <li>, <menú>, <objeto>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <cabeza>, <ul> |
| Versión DOM: | Eventos de nivel 2 |
Más ejemplos
Ejemplo
Alternar entre nombres de clase en diferentes posiciones de desplazamiento: cuando el usuario se desplaza hacia abajo 50 píxeles desde la parte superior de la página, el nombre de clase "prueba" se agregará a un elemento (y se eliminará cuando se desplace hacia arriba nuevamente).
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Ejemplo
Deslice un elemento cuando el usuario se haya desplazado 350 píxeles hacia abajo desde la parte superior de la página (agregue la clase slideUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}