onscroll-gebeurtenis

DOM events Event object

Definitie en gebruik

De onscroll-gebeurtenis treedt op wanneer de scrollbar van het element wordt geschoven.

Tip:Gebruik CSS overflow Stijl-eigenschappen creëren een scrollbar voor het element.

Voorbeeld

Voorbeeld 1

Voer JavaScript uit bij het scrollen van het <div>-element:

<div onscroll="myFunction()">

Probeer het zelf

Voorbeeld 2

Wissel tussen classnamen op verschillende scrollposities - wanneer de gebruiker 50 pixels van de pagina boven naar beneden scrolt, wordt de classnaam "test" toegevoegd aan het element (wordt verwijderd bij opnieuw omhoog scrolen).

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

Probeer het zelf

Voorbeeld 3

Als de gebruiker 350 pixels van de bovenkant van de pagina naar beneden scrolt, wordt het element ingesluisd (voeg slideUp klasse toe):

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

Probeer het zelf

Syntax

In HTML:

<element onscroll="myScript">

Probeer het zelf

In JavaScript:

object.onscroll = function(){myScript};

Probeer het zelf

In JavaScript, gebruik de addEventListener() methode:

object.addEventListener("scroll", myScript);

Probeer het zelf

Opmerking:Internet Explorer 8 of eerder ondersteunt dit niet addEventListener() methode。

Technische details

Bubbelend: Niet ondersteund
Annuleerbaar: Niet ondersteund
Evenementtype: als het door de gebruikersinterface gegenereerd wordt,UiEvent。Anderenwise Event。
Ondersteunde HTML tags: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> tot <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 object