Tukio la onscroll

Matukio ya DOM Muhtasari ya Event

Ufafanuzi na matumizi

Tukio la onscroll linaenea kwa sababu ya kina kusikia kina.

Maelezo:Tumia CSS Kuchukua Mafanikio ya mabara ya kikoa yanafanya kina kuzia kina.

Mfano

Mfano 1

Kufanya JavaScript kwenye kina <div> kwenye kusikia:

<div onscroll="myFunction()">

Jaribu kwa mwenyewe

Mfano 2

Kuchukuzwa kwa jina la kikoa cha kwanza kati ya viwango vya kikoa vya kina - Kwa sababu ya kusikia kwa juu ya ukuta wa 50 mita kwenye ukuta wa ukia, jina la "test" lizatangazwa kwenye kina (likipasua kuzikia kwenye juu).

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

Jaribu kwa mwenyewe

Mfano 3

Kama mtumishi anasikia kutoka kwenye kipimo cha juu cha ukurasa hadi 350 mita, ingingia elementi (ongea kwa kiwango cha slideUp 类):

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

Jaribu kwa mwenyewe

Inasema:

Kwenye HTML:

<element onscroll="myScript">

Jaribu kwa mwenyewe

Kwenye JavaScript:

object.onscroll = function(){myScript};

Jaribu kwa mwenyewe

Kwenye JavaScript, tumia method ya addEventListener():

object.addEventListener("scroll", myScript);

Jaribu kwa mwenyewe

Mafanikio:Internet Explorer 8 na zaidi ya hayo hazikubadilika Method ya addEventListener().

Maelezo ya kidhamani

Inabubiri: Hakuna msaada
Inafaa kugundua: Hakuna msaada
Aina ya matukio: Ikiwa inatokana na ujenzi wa uwanja wa mtumishiUiEvent. Event.
Tafsiri ya HTML: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> hadi <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
Mwili wa DOM: Matukio ya Level 2

Mwongozo wa wasafiri

Matukio Chrome IE Firefox Safari Opera
onscroll Msaada Msaada Msaada Msaada Msaada
Matukio ya DOM Muhtasari ya Event