onscroll-händelsen

DOM-händelser Event-objekt

Definition och användning

onscroll-händelsen inträffar när elementets rullningslist rullas.

Tips:Använd CSS overflow Stilattribut skapar en rullningslist för elementet.

Exempel

Exempel 1

Kör JavaScript när <div>-elementet rullas:

<div onscroll="myFunction()">

Prova själv

Exempel 2

Byta mellan klassnamn vid olika rullningspositioner - när användaren rullar 50 pixlar från sidans topp neråt, läggs klassnamnet "test" till elementet (det tas bort igen när man rullar uppåt).

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

Prova själv

Exempel 3

När användaren rullar ner från sidans topp 350 pixlar in i elementet (lägg till slideUp-klassen):

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

Prova själv

Syntax

I HTML:

<element onscroll="myScript">

Prova själv

I JavaScript:

object.onscroll = function(){myScript};

Prova själv

I JavaScript, använd addEventListener() metoden:

object.addEventListener("scroll", myScript);

Prova själv

Kommentar:Internet Explorer 8 eller tidigare versioner stöder inte addEventListener() metoden。

Tekniska detaljer

Bubbling: Stöds inte
Kan annulleras: Stöds inte
Evenstyp: Om det genereras från användargränssnittet:UiEvent。 Event。
Stödda HTML-taggar: adress, blockquote, body, caption, center, dd, dir, div, dl, dt, fieldset, form, h1 till h6, html, li, menu, object, ol, p, pre, select, tbody, textarea, tfoot, thead, ul
DOM-version: Level 2 Events

Webbläsarstöd

Händelser Chrome IE Firefox Safari Opera
onscroll Stöd Stöd Stöd Stöd Stöd
DOM-händelser Event-objekt