onscroll-tapahtuma

DOM-tapahtumat Event-objekti

Määrittely ja käyttö

onscroll-tapahtuma tapahtuu, kun elementin pyöristin pyöritetään.

Vinkki:Käytä CSS:ää overflow Tyyliominaisuudet luovat elementille pyöristimen.

Esimerkki

Esimerkki 1

Suorita JavaScript pyörittäessä <div>-elementtiä:

<div onscroll="myFunction()">

Kokeile itse

Esimerkki 2

Vaihda eri pyöristysasentojen välillä - kun käyttäjä pyörii sivun yläpäähän alaspäin 50 kuvapistettä, luokka "test" lisätään elementtiin (ja poistetaan, kun pyöritään ylös).

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

Kokeile itse

Esimerkki 3

Kun käyttäjä pyörittää sivua alaspäin 350 pikseliä, elementti liukuu ylös (lisätään slideUp-luokka):

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

Kokeile itse

Syntaksi

HTML:ssä:

<element onscroll="myScript">

Kokeile itse

JavaScriptissa:

object.onscroll = function(){myScript};

Kokeile itse

JavaScriptissa käytetään addEventListener() -menetelmää:

object.addEventListener("scroll", myScript);

Kokeile itse

Huomautus:Internet Explorer 8 tai aikaisemmat versiot eivät tue addEventListener() -menetelmä。

Tekninen tarkistus

Päihteet: Ei tuettu
Peruutettavissa: Ei tuettu
Tapahtumatyypit: Jos tapahtuma on luotu käyttöliittymästä:UiEvent。 Event。
Tuetut HTML-merkit: <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>
DOM-versio: Taso 2 -tapahtumat

Selaimen tuki

Tapahtumat Chrome IE Firefox Safari Opera
onscroll Tuki Tuki Tuki Tuki Tuki
DOM-tapahtumat Event-objekti