Evento onscroll

Eventos DOM Objeto Event

Definición y uso

El evento onscroll ocurre cuando se desplaza la barra de desplazamiento del elemento.

Consejo:Usar CSS Overflow Las propiedades de estilo de clase crean una barra de desplazamiento para el elemento.

Ejemplo

Ejemplo 1

Ejecutar JavaScript al desplazar <div> en la barra de desplazamiento:

<div onscroll="myFunction()">

Prueba por tu cuenta

Ejemplo 2

Cambiar entre nombres de clase en diferentes posiciones de desplazamiento - Cuando el usuario desciende desde la parte superior de la página 50 píxeles, se añade la clase "test" al elemento (se eliminará al desplazarse hacia arriba nuevamente).

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  }
    document.getElementById("myP").className = "";
  }
}

Prueba por tu cuenta

Ejemplo 3

Cuando el usuario desciende desde la parte superior de la página 350 píxeles, introduce el elemento (agrega la clase slideUp):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

Prueba por tu cuenta

Sintaxis

En HTML:

<element onscroll="myScript">

Prueba por tu cuenta

En JavaScript:

object.onscroll = function(){myScript};

Prueba por tu cuenta

En JavaScript, utiliza el método addEventListener():

object.addEventListener("scroll", myScript);

Prueba por tu cuenta

Notas:Internet Explorer 8 o versiones anteriores no lo soportan Método addEventListener().

Detalles técnicos

Burbuja: No soportado
Cancelable: No soportado
Tipo de evento: Si se genera desde la interfaz de usuarioUiEvento. De lo contrario Evento.
Soportadas etiquetas HTML: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
Versión del DOM: Eventos de Nivel 2

Compatibilidad del navegador

Eventos Chrome IE Firefox Safari Opera
onscroll Soporte Soporte Soporte Soporte Soporte
Eventos DOM Objeto Event