onscroll-tilsagnet

DOM events Event objekt

Definition og brug

onscroll-tilsagnet udløses, når elementets rulleliste rulles.

Tip:Brug CSS overflow Stilattributter opretter en rulleliste for elementet.

Eksempel

Eksempel 1

Udfør JavaScript, når <div>-elementet rulles:

<div onscroll="myFunction()">

Prøv det selv

Eksempel 2

Mellem skift af klassenavne på forskellige rullemidler - når brugeren ruller ned 50 pixels fra toppen af siden, tilføjes klassenavnet "test" til elementet (det fjernes igen, når der rulles op).

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

Prøv det selv

Eksempel 3

Når brugeren ruller ned 350 pixels fra toppen af siden, glider elementet ind (tilføj slideUp-klassen):

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

Prøv det selv

Syntaks

I HTML:

<element onscroll="myScript">

Prøv det selv

I JavaScript:

object.onscroll = function(){myScript};

Prøv det selv

I JavaScript bruges addEventListener() metoden:

object.addEventListener("scroll", myScript);

Prøv det selv

Bemærkninger:Internet Explorer 8 eller tidligere versioner understøtter ikke addEventListener() metoden。

Tekniske detaljer

Boble: Ikke understøttet
Kan annulleres: Ikke understøttet
Eventtype: Hvis genereret fra brugergrænsefladen:UiEvent。 Event。
Understøttede HTML-mærker: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> til <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
DOM version: Level 2 Events

Browser support

Events Chrome IE Firefox Safari Opera
onscroll Support Support Support Support Support
DOM events Event objekt