Evento onscroll

Eventi DOM Oggetto Evento

Definizione e uso

L'evento onscroll si verifica quando la barra di scorrimento dell'elemento viene scorsa.

Suggerimento:Usa CSS overflow Le proprietà di stile creano una barra di scorrimento per l'elemento.

Esempio

Esempio 1

Esegui JavaScript quando si scorre l'elemento <div>:

<div onscroll="myFunction()">

Prova personalmente

Esempio 2

Cambiare tra i nomi delle classi in posizioni di scorrimento diverse - Quando l'utente scorre verso il basso dalla parte superiore della pagina di 50 pixel, il nome della classe "test" viene aggiunto all'elemento (viene rimossa quando si scorre di nuovo verso l'alto).

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

Prova personalmente

Esempio 3

Quando l'utente scorre di 350 pixel dal fondo della pagina verso l'alto, inserisci l'elemento (aggiungi la classe slideUp):

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

Prova personalmente

Sintassi

In HTML:

<element onscroll="myScript">

Prova personalmente

In JavaScript:

object.onscroll = function(){myScript};

Prova personalmente

In JavaScript, utilizzare il metodo addEventListener():

object.addEventListener("scroll", myScript);

Prova personalmente

Note:Internet Explorer 8 o versioni precedenti non supportano Metodo addEventListener()。

Dettagli tecnici

Bubble: Non supportato
Cancellable: Non supportato
Tipo di evento: Se generato dall'interfaccia utente,UiEvent。 Event。
Supportati tag 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>
Versione DOM: Eventi livello 2

Supporto browser

Eventi Chrome IE Firefox Safari Opera
onscroll Supporto Supporto Supporto Supporto Supporto
Eventi DOM Oggetto Evento