tutorial pengembangan web terbaru
 

Acara onscroll

<Object Acara

Contoh

Mengeksekusi JavaScript ketika <div> elemen sedang menggulir:

<div onscroll="myFunction()">
Cobalah sendiri "

Definisi dan Penggunaan

Acara onscroll terjadi ketika scrollbar elemen ini sedang menggulir.

Tip: gunakan CSS meluap properti gaya untuk membuat scrollbar untuk elemen.

Dukungan Browser

Peristiwa
onscroll iya nih iya nih iya nih iya nih iya nih

Sintaksis

Dalam HTML:

< Cobalah sendiri "

Dalam JavaScript:

object .onscroll=function(){ Cobalah sendiri "

Dalam JavaScript, menggunakan addEventListener() metode:

object .addEventListener("scroll", myScript );
Cobalah sendiri "

Catatan: addEventListener() metode tidak didukung di Internet Explorer 8 dan versi sebelumnya.

Rincian teknis

Gelembung: Tidak
dibatalkan: Tidak
jenis acara: UIEvent
tag HTML yang didukung: <alamat>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> untuk <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <pilih>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
DOM Versi: Level 2 Acara
contoh

Contoh lebih

Contoh

Beralih antara nama kelas pada posisi scroll yang berbeda - Ketika pengguna gulungan bawah 50 pixel dari atas halaman, nama kelas "test" akan ditambahkan ke elemen (and removed when scrolled up again) .

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 = "";
    }
}
Cobalah sendiri "

Contoh

Slide di elemen ketika pengguna telah menggulir ke bawah 350 pixel dari atas halaman (add the slideUp class) :

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
        document.getElementById("myImg").className = "slideUp";
}
Cobalah sendiri "
<Object Acara