Ejemplo
Ejecutar un JavaScript cuando un <div> se está desplazando elemento:
<div onscroll="myFunction()"> Inténtalo tú mismo " Definición y Uso
El evento onscroll se produce cuando se está desplazando la barra de desplazamiento de un elemento.
Consejo: utilizar el CSS desbordamiento propiedad de estilo para crear una barra de desplazamiento para un elemento.
Soporte del navegador
| Evento | |||||
|---|---|---|---|---|---|
| onscroll | Sí | Sí | Sí | Sí | Sí |
Sintaxis
En HTML:
En JavaScript:
object .onscroll=function(){ Inténtalo tú mismo " En JavaScript, utilizando el addEventListener() método:
object .addEventListener("scroll", myScript );
Inténtalo tú mismo " Nota: El addEventListener() método no es compatible en Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| burbujas: | No |
|---|---|
| cancelable: | No |
| Tipo de evento: | UIEvent |
| etiquetas HTML admitidas: | <dirección>, <blockquote>, <body>, <caption>, <centro>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> a <h6>, <html>, <li>, <menú>, <objeto>, <ol>, <p>, <pre>, <seleccionar>, <tbody>, <textarea>, <tfoot>, <culata en T>, <ul> |
| DOM Versión: | Nivel 2 Eventos |
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 "test" se añadirán a un elemento (and removed when scrolled up again) .
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
= "";
}
}
Inténtalo tú mismo " Ejemplo
De diapositivas en un elemento cuando el usuario se haya desplazado hacia abajo 350 píxeles desde la parte superior de la página (add the slideUp class) :
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop >
350) {
document.getElementById("myImg").className = "slideUp";
}
Inténtalo tú mismo " <Objeto de evento