scrollHeight özelliği, dikey kaydırma çubuğu (vertical scroll bar) içerebilen elementler de kaydırılabilen içeriğin (element içeriğinin) piksel cinsinden yüksekliğini verir.
Sözdizimi
yukseklik = element.scrollHeight
Dönüş Değeri
| yukseklik | Nesne içeriğinin yüksekliği. Bu değere yan dolgular (padding) dahildir. Fakar kenar payları (margin) dahil değildir. |
Aşağıdaki örnek, dikey ve yatay kaydırma çubuklarına sahip bir div elementi içeriğine yeni yazı ekleyerek scrollHeight özelliğindeki değişimi göstermektedir.
<div id="ornekDiv" style="width: 100px; height: 200px; overflow: scroll;"></div>
<br/>
<div id="bilgiDiv"></div>
<br/>
<b>Eklenecek Yazı : </b><input type="text" id="textGiris"/> <b>+ "<br/>"</b>
<br/>
<input type="button" value="Yazıyı Ekle" onClick="yaziEkle()"/>
<script type="text/javascript">
var ornekDiv = document.getElementById('ornekDiv');
var bilgiDiv = document.getElementById('bilgiDiv');
var textGiris = document.getElementById('textGiris');
function bilgiYaz()
{
bilgiDiv.innerHTML = "<b>" +
"scrollHeight : " + ornekDiv.scrollHeight + "<br/>" +
"scrollLeft : " + ornekDiv.scrollLeft + "<br/>" +
"scrollTop : " + ornekDiv.scrollTop + "<br/>" +
"</b>";
}
function doldur()
{
var yazilacak = "";
for(i = 0; i < 50;i++)
yazilacak += "Lorem_ipsum_dolor_sit_amet" + "<br/>";
ornekDiv.innerHTML = yazilacak;
}
function yaziEkle()
{
ornekDiv.innerHTML += textGiris.value + "<br/>";
bilgiYaz();
}
ornekDiv.onscroll = bilgiYaz;
doldur();
bilgiYaz();
</script>
Test Edin