Ultimele tutoriale de dezvoltare web
 

Eveniment onscroll

<Eveniment obiect

Exemplu

Executați un JavaScript atunci când un <div> elementul este defilat:

<div onscroll="myFunction()">
Încearcă - l singur »

Definiție și utilizare

Evenimentul are loc atunci când onscroll scrollbar unui element este defilat.

Sfat: utilizați CSS overflow stil de proprietate pentru a crea o bară de derulare pentru un element.


Suport pentru browser-

Eveniment
onscroll da da da da da

Sintaxă

In HTML:

În JavaScript:

object .onscroll=function(){ Încearcă - l singur »

În JavaScript, folosind addEventListener() metoda:

object .addEventListener("scroll", myScript );
Încearcă - l singur »

Notă: addEventListener() , metoda nu este acceptată în Internet Explorer 8 și versiunile anterioare.


Detalii tehnice

Bule: Nu
anulabil: Nu
Tip de eveniment: UIEvent
Tag-uri HTML acceptate: <adresa>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir> <div>, <dl>, <dt>, <FIELDSET>, <form>, <h1> la <h6>, <html>, <li>, <meniu>, <object>, <ol>, <p> <pre>, <select>, <tbody>, <textarea>, <TFOOT>, <thead>, <ul>
DOM Versiune: Nivelul 2 Evenimente
Exemple

Mai multe exemple

Exemplu

Comutare între nume de clase pe diferite poziții de defilare - Atunci când utilizatorul derulează în jos 50 de pixeli din partea de sus a paginii, numele clasei "test" vor fi adăugate la un element (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 = "";
    }
}
Încearcă - l singur »

Exemplu

Slide într - un element atunci când utilizatorul a defilat în jos 350 de pixeli din partea de sus a paginii (add the slideUp class) :

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
        document.getElementById("myImg").className = "slideUp";
}
Încearcă - l singur »

<Eveniment obiect