scrollWidth özelliği, yatay kaydırma çubuğu (horizontal scroll bar) içerebilen elementler de kaydırılabilen içeriğin piksel cinsinden genişliğini verir. İçerik genişliğinin elementin genişliğinden ufak olması durumunda elementin genişliğini verir.
Sözdizimi
genislik = element.scrollWidth
Dönüş Değeri
| genislik | Nesne içeriğinin genişliği. Eğer elementin genişliğinden ufaksa, elementin genişliği bu değere atanır. |
Aşağıdaki örnek, bir div elementi içeriğine yatay kaydırma çubuğu oluşturulacak şekilde ekleme yapıldığı zaman scrollWidth özelliğindeki değişimi göstermektedir.
<div id="ornekDiv" style="width: 100px; height: 50px; overflow: scroll;"></div>
<br/>
<div id="bilgiDiv"></div>
<br/>
<b>Eklenecek Yazı : </b><input type="text" id="textGiris" value="A"/>
<br/>
<input type="button" value="Yazıyı Ekle" onClick="yaziEkle()"/>
<input type="button" value="DIV içeriğini Temizle" onClick="divTemizle();"/>
<script type="text/javascript">
var ornekDiv = document.getElementById('ornekDiv');
var bilgiDiv = document.getElementById('bilgiDiv');
var textGiris = document.getElementById('textGiris');
function bilgiYaz()
{
bilgiDiv.innerHTML = "<b>" +
"scrollWidth : " + ornekDiv.scrollWidth + "<br/>" +
"scrollLeft : " + ornekDiv.scrollLeft + "<br/>" +
"</b>";
}
function yaziEkle()
{
var eklenecek = document.createTextNode(textGiris.value);
ornekDiv.appendChild(eklenecek);
bilgiYaz();
}
function divTemizle()
{
ornekDiv.innerHTML = '';
bilgiYaz();
}
ornekDiv.onscroll = bilgiYaz;
ornekDiv.innerHTML = "<b>myNotlar</b>";
bilgiYaz();
</script>
Test Edin