Element.scrollWidth

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

Eklenecek Yazı :

İlgili Başlıklar