Element.scrollHeight

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

Eklenecek Yazı : + "<br/>"

İlgili Başlıklar