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
| deger | Kaydı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
| ustten | Kaydı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