myNotlar Logo

onScroll Olayı (Event)


JavaScript onScroll olayı (event), 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. HTML onScroll özelliği element üzerinde scroll olayı gerçekleştiği zaman çalıştırılacak fonksiyonun veya betiğin (script) belirtilmesini sağlar.

HTML dahilindeki sadece tek bir fonksiyon belirtilebilen bu tip olay yönetim fonksiyonlarına olay tutucu (event handler) ismi verilir. Fakat, HTML DOM'da birden fazla olay yönetim fonksiyonu belirtilebildiği için olay tutucusu isminden ziyade olay dinleyici (event listener) ismi kullanılmaktadır. DOM'da olay dinleyici fonksiyonlar attachEvent ve addEventListener fonksiyonları ile ilgili elemente eklenebilir/bağlanabilir.

HTML Sözdizimi

<element onscroll="betik" > ... </element>

DOM Sözdizimi

element.onscroll = fonkBetik;

betik = element.onscroll
betikonscroll olayı tetiklendiğinde çalıştırılacak betik (script) kodlarını belirtir.
fonkBetikonscroll olayı tetiklendiğinde çalıştırılacak fonksiyon adını veya betik kodlarını belirtir.

Dönüş Değeri

betikFonksiyon belirtildiyse fonksiyon gövdesi veya betik kodları döner.

Örnek

Aşağıdaki örnek, JavaScript onScroll olay tutucu 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>
Test Edin

Elementler

scroll olayının gerçekleşebileceği/kontrol edilebileceği HTML etiketleri/elementleri

BDO | BODY | DIV | MAP | MARQUEE | OBJECT | TABLE | TEXTAREA

İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |