acara gulir
Contoh
Jalankan JavaScript ketika elemen <div> sedang digulir:
<div onscroll="myFunction()">
Definisi dan Penggunaan
Peristiwa onscroll terjadi ketika bilah gulir elemen sedang digulir.
Tip: gunakan properti CSS overflow style untuk membuat scrollbar untuk sebuah elemen.
Dukungan Peramban
Event | |||||
---|---|---|---|---|---|
onscroll | Yes | Yes | Yes | Yes | Yes |
Sintaksis
Dalam HTML:
<element onscroll="myScript">
Dalam JavaScript:
object.onscroll = function(){myScript};
Dalam JavaScript, menggunakan metode addEventListener() :
object.addEventListener("scroll", myScript);
Catatan: Metode addEventListener() tidak didukung di Internet Explorer 8 dan versi yang lebih lama.
Detail Teknis
Gelembung: | Tidak |
---|---|
Dapat dibatalkan: | Tidak |
Jenis acara: | UiEvent jika dihasilkan dari antarmuka pengguna, Event sebaliknya |
Tag HTML yang didukung: | <alamat>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1 > ke <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
Versi DOM: | Acara Tingkat 2 |
Lebih Banyak Contoh
Contoh
Beralih antara nama kelas pada posisi gulir yang berbeda - Saat pengguna menggulir ke bawah 50 piksel dari bagian atas halaman, nama kelas "test" akan ditambahkan ke elemen (dan dihapus saat digulir ke atas lagi).
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Contoh
Geser elemen saat pengguna menggulir ke bawah 350 piksel dari bagian atas halaman (tambahkan kelas slideUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}