onscroll Etkinliği
Örnek
Bir <div> öğesi kaydırılırken bir JavaScript yürütün:
<div onscroll="myFunction()">
Tanım ve Kullanım
Onscroll olayı, bir elemanın kaydırma çubuğu kaydırıldığında meydana gelir.
İpucu: Bir öğe için kaydırma çubuğu oluşturmak için CSS taşma stili özelliğini kullanın.
Tarayıcı Desteği
Event | |||||
---|---|---|---|---|---|
onscroll | Yes | Yes | Yes | Yes | Yes |
Sözdizimi
HTML'de:
<element onscroll="myScript">
JavaScript'te:
object.onscroll = function(){myScript};
JavaScript'te, addEventListener() yöntemini kullanarak:
object.addEventListener("scroll", myScript);
Not: addEventListener () yöntemi, Internet Explorer 8 ve önceki sürümlerde desteklenmez.
Teknik detaylar
kabarcıklar: | Numara |
---|---|
İptal edilebilir: | Numara |
Etkinlik tipi: | Bir kullanıcı arabiriminden oluşturulmuşsa UiEvent , aksi takdirde Event |
Desteklenen HTML etiketleri: | <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1 > <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
DOM Sürümü: | 2. Seviye Etkinlikleri |
Daha fazla örnek
Örnek
Farklı kaydırma konumlarında sınıf adları arasında geçiş yap - Kullanıcı sayfanın üst kısmından 50 piksel aşağı kaydırdığında, "test" sınıf adı bir öğeye eklenir (ve tekrar yukarı kaydırıldığında kaldırılır).
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 = "";
}
}
Örnek
Kullanıcı sayfanın üst kısmından 350 piksel aşağı kaydırdığında bir öğeyi kaydırın (slideUp sınıfını ekleyin):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}