onscroll na kaganapan

DOM Events Event Obheto

Pagsasakop at Paggamit

Ang onscroll na kaganapan ay nangyayari kapag ang bar ng paggalaw ng elemento ay iniaangkin.

Mga payo:Ginagamit ang CSS overflow Ang estilo ng overflow ay nagbibigay ng scroll bar sa elemento.

Sample

Halimbawa 1

Ipausabang JavaScript kapag iniaangkin ang elemento <div> sa paggalaw:

<div onscroll="myFunction()">

Subukan nang personal mo

Halimbawa 2

Sa pag-alisal sa iba't ibang posisyon ng paggalaw ng pahina - kapag ang user ay naggalaw mula sa itaas ng pahina papunta sa ilalim ng 50 pixel, ang pangalan ng klase "test" ay magiging kasama sa elemento (matapos muling i-up ng paggalaw).

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

Subukan nang personal mo

Halimbawa 3

Kapag ang user ay nagrolumpon mula sa itaas ng pahina patungo sa ibaba ng 350 pixels, ilagay ang slideUp class sa elemento (magdagdag ng slideUp class):

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

Subukan nang personal mo

Grammar

Sa HTML:

<element onscroll="myScript">

Subukan nang personal mo

Sa JavaScript:

object.onscroll = function(){myScript};

Subukan nang personal mo

Sa JavaScript, gamit ang addEventListener() method:

object.addEventListener("scroll", myScript);

Subukan nang personal mo

Komento:Internet Explorer 8 o mas maaga ay hindi suportado addEventListener() method。

Teknikal na detalye

Bububogbog: Hindi suportado
Maaaring kanselahin: Hindi suportado
Uri ng event: Kung gawa mula sa user interface:UiEvent。 Event。
Suportadong HTML tag: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> sa <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 Obheto