Peristiwa onscroll

Peristiwa DOM Objek Event

Definisi dan penggunaan

Peristiwa onscroll terjadi saat garis滚条 elemen dirol.

Petunjuk:Gunakan CSS overflow Properti gaya membuat garis滚条 untuk elemen.

Contoh

Contoh 1

Lakukan JavaScript saat elemen <div> dirol:

<div onscroll="myFunction()">

Coba sendiri

Contoh 2

Tukar nama kelas di posisi berroll yang berbeda - ketika pengguna mengerol ke bawah dari puncak halaman 50 pixel, nama kelas "test" akan ditambahkan ke elemen (akan dihapus kembali saat dirol ke atas).

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

Coba sendiri

Contoh 3

Ketika pengguna mengerol ke bawah dari atas halaman 350 piksel, masukkan elemen (tambahkan kelas slideUp):

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

Coba sendiri

Sintaks

Pada HTML:

<element onscroll="myScript">

Coba sendiri

Pada JavaScript:

object.onscroll = function(){myScript};

Coba sendiri

Pada JavaScript, gunakan metode addEventListener():

object.addEventListener("scroll", myScript);

Coba sendiri

Keterangan:Internet Explorer 8 atau versi sebelumnya tidak mendukung Metode addEventListener()。

Detil teknikal

Bubbling: Tidak didukung
Boleh dibatalkan: Tidak didukung
Jenis even: Jika dihasilkan dari antarmuka pengguna,UiEvent。Jika tidak, Event。
Diperkenalkan tag HTML yang didukung: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
Versi DOM: Peristiwa Level 2

Dukungan Pemerosahan

Peristiwa Chrome IE Firefox Safari Opera
onscroll Dukungan Dukungan Dukungan Dukungan Dukungan
Peristiwa DOM Objek Event