Onscroll olayı

DOM olayları Event nesnesi

Tanım ve Kullanım

Onscroll olayı, elementin kaydırma çubuğu kaydırıldığında tetiklenir.

İpucu:CSS kullanın Aşırı Stil özellikleri, elemente kaydırma çubuğu oluşturur.

Örnek

Örnek 1

Div elementi kaydırılırken JavaScript çalıştırılır:

<div onscroll="myFunction()">

Kişisel olarak deneyin

Örnek 2

Farklı kaydırma konumları arasındaki sınıf adları arasında geçiş yapma - Kullanıcı sayfa üstünden 50 piksel aşağı kaydırırken, "test" sınıfı elemana eklenir (yukarı kaydırıldığında silinir).

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

Kişisel olarak deneyin

Örnek 3

Kullanıcı sayfa başından 350 piksel aşağıya doğru kaydırıldığında elemente (slideUp sınıfı eklenir):

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

Kişisel olarak deneyin

Gramer

HTML'de:

<element onscroll="myScript">

Kişisel olarak deneyin

JavaScript'te:

object.onscroll = function(){myScript};

Kişisel olarak deneyin

JavaScript'te addEventListener() metodu kullanarak:

object.addEventListener("scroll", myScript);

Kişisel olarak deneyin

Açıklama:Internet Explorer 8 veya daha eski sürümler desteklemiyor addEventListener() metodu。

Teknik ayrıntılar

Balonlama: Desteklenmiyor
İptal edilebilir: Desteklenmiyor
Olay türü: Eğer kullanıcı arayüzünden oluşturulmuşsa,UiEvent。 Event。
Desteklenen HTML etiketleri: <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>
DOM sürümü: 2. Seviye Olaylar

Tarayıcı desteği

Olaylar Chrome IE Firefox Safari Opera
onscroll Destek Destek Destek Destek Destek
DOM olayları Event nesnesi