scrollLeft özelliği, yatay kaydırma çubuğu (horizontal scroll bar) içerebilen elementler de kaydırma çubuğu konumunun, sol tarafa uzaklığının ayarlanmasını veya öğrenilmesini sağlar.
Sözdizimi
soldan = element.scrollLeft
element.scrollLeft = deger
| deger | Kaydırma çubuğunun piksel cinsinden soldan yeni uzaklığını belirler.
- 0'dan (sıfır) ufak olması durumunda scrollLeft 0'a eşitlenir.
- Maksimum değerden büyük olması durumunda scrollLeft maksimum değere eşitlenir.
|
Dönüş Değeri
| soldan | Kaydırma çubuğunun piksel cinsinden soldan uzaklığını verir. |
Aşağıdaki örnek, dikey ve yatay kaydırma çubuklarına sahip bir div elementinin yatay kaydırma çubuğunun (horizontal scroll) 10 piksel sağa veya sola kaydırılmasını ve elementin onscroll olay tutucusu ile kaydırmanın tespit edilerek scrollLeft değerinin gerçek zamanlı öğrenilmesini göstermektedir.
<div id="bilgiDiv"></div>
<br/>
<table>
<tr>
<td colspan="2">
<div id="ornekDiv" style="width: 100px; height: 200px; overflow: scroll;"></div>
</td>
<tr>
<td align="left"><input type="button" value="-" onClick="Azalt();"></td>
<td align="right"><input type="button" value="+" onClick="Arttir();"></td>
</tr>
</table>
<script type="text/javascript">
var ornekDiv = document.getElementById('ornekDiv');
var bilgiDiv = document.getElementById('bilgiDiv');
// 'scrollLeft' değerini +10 arttırır.
function Arttir() {
ornekDiv.scrollLeft += 10;
}
// 'scrollLeft' değerini -10 azaltır.
function Azalt() {
ornekDiv.scrollLeft -= 10;
}
// 'scrollLeft' değerini 'bilgiDiv' içine yazar.
function scrollLeftYaz()
{
bilgiDiv.innerHTML = "<b>" +
"scrollLeft : " + ornekDiv.scrollLeft +
"</b>";
}
var yazilacak = "";
for(i = 0; i < 50;i++)
yazilacak += "Lorem_ipsum_dolor_sit_amet" + "<br/>";
ornekDiv.innerHTML = yazilacak;
ornekDiv.onscroll = scrollLeftYaz;
scrollLeftYaz();
</script>
Test Edin