myNotlar Logo

Element.scrollTop


Internet Explorer Firefox Opera

scrollTop özelliği, dikey kaydırma çubuğu (vertical scroll bar) içerebilen elementler de kaydırma çubuğu konumunun, üst tarafa uzaklığının ayarlanmasını veya öğrenilmesini sağlar.

Sözdizimi

ustten = element.scrollTop

element.scrollTop = deger
degerKaydırma çubuğunun piksel cinsinden üstten yeni uzaklığını belirler.
  • 0'dan (sıfır) ufak olması durumunda scrollTop 0'a eşitlenir.
  • Maksimum değerden büyük olması durumunda scrollTop maksimum değere eşitlenir.

Dönüş Değeri

usttenKaydırma çubuğunun piksel cinsinden üstten uzaklığını verir.

Aşağıdaki örnek, dikey ve yatay kaydırma çubuklarına sahip bir div elementinin dikey kaydırma çubuğunun (vertical scroll) 20 piksel aşağı veya yukarı kaydırılmasını ve elementin onscroll olay tutucusu ile kaydırmanın tespit edilerek scrollTop değerinin öğrenilmesini göstermektedir.

<div id="bilgiDiv"></div>
<br/>

<table>
<tr>
     <td rowspan="3">
          <div id="ornekDiv" style="width: 100px; height: 200px; overflow: scroll;"></div>
     </td>
     <td valign="top">
          <input type="button" value="-" onClick="Azalt();">
     </td>
</tr>
<tr>
     <td></td>
</tr>
<tr>
     <td valign="bottom">
          <input type="button" value="+" onClick="Arttir();">
     </td>
</tr>
</table>

<script type="text/javascript">

var ornekDiv = document.getElementById('ornekDiv');
var bilgiDiv = document.getElementById('bilgiDiv');

// 'scrollTop' değerini +20 arttırır.
function Arttir() {
  ornekDiv.scrollTop += 20;
}

// 'scrollTop' değerini -20 azaltır.
function Azalt() {
  ornekDiv.scrollTop -= 20;  
}

// 'scrollTop' değerini 'bilgiDiv' içine yazar.
function scrollTopYaz()
{
	bilgiDiv.innerHTML = "<b>" + 
		"scrollLeft : " + ornekDiv.scrollTop + 
		"</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 = scrollTopYaz;

scrollTopYaz();

</script>
Test Edin

İ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 |