myNotlar Logo

Element.scrollLeft


Internet Explorer Firefox Opera

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
degerKaydı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

soldanKaydı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

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