JavaScript onScroll olay tutucusu, kaydırma çubuğu (scrollbar) içerebilen herhangi bir elementte, yatay (horizontal) veya dikey (vertical) kaydırma çubuğunun konumu değiştiği zaman tetiklenir.
Aşağıdaki örnek onScroll olay tutucuyu kullanarak, div elementi içindeki yatay ve dikey kaydırma çubuklarındaki değişimlerin anlık olarak öğrenilmesini göstermektedir.
<div id="ornekDiv" style="width: 150px; height: 150px; overflow: scroll;"></div>
<br/>
<div id="bilgiDiv">
Dikey Çubuk (Üstten) : <br/>
Yatay Çubuk (Soldan) :
</div>
<script type="text/javascript">
var ornekDiv = document.getElementById('ornekDiv');
var bilgiDiv = document.getElementById('bilgiDiv');
// 'scrollTop' ve 'scrollLeft' değerlerini 'bilgiDiv' içine yazar.
function scrollYaz()
{
bilgiDiv.innerHTML = "<b>" +
"Dikey Çubuk (Üstten) : " + ornekDiv.scrollTop + "<br/>" +
"Yatay Çubuk (Soldan) : " + ornekDiv.scrollLeft +
"</b>";
}
var yazilacak = "";
// 'ornekDiv' içi 'scroll' oluşturacak şekilde dolduruluyor.
for(i = 0; i < 50;i++)
yazilacak += "Lorem_ipsum_dolor_sit_amet" + "<br/>";
ornekDiv.innerHTML = yazilacak;
ornekDiv.onscroll = scrollYaz;
// İlk değerler yazılıyor.
scrollYaz();
</script>
Örnekte iki tane div elementi tanımlanmıştır. Bunlardan biri "overflow" CSS özelliği "scroll" olarak belirtilerek içeriğinin element sınırlarını aşması durumunda yatay (horizontal) ve dikey (vertical) kaydırma çubukları gösteren ornekDiv, diğeri ise ornekDiv elementinin yatay ve dikey kaydırma çubukları (scrollbar) konumlarının gösterildiği bilgiDiv div elementleridir. Kullanımı kolaylaştırmak için element referansları aşağıdaki gibi tanımlanmıştır.
var ornekDiv = document.getElementById('ornekDiv');
var bilgiDiv = document.getElementById('bilgiDiv');
| |
Element Referansı Element Adı
Kaydırma çubuklarını oluşturmak için for döngüsü ile elli defa aynı satır ornekDiv içine yazdırılmışır. Sonrasın da kaydırma çubuklarının konum değerlerini veren scrollTop ve scrollLeft özelliklerini bilgiDiv içine yazmak için scrollYaz metodu yazılmış ve aşağıdaki gibi ornekDiv elementinin onScroll olay dinleyicisine kaydedilmiştir.
ornekDiv.onscroll = scrollYaz;
Test Edin