Bir <div> alanının css bilgilerinde overflow:auto olarak tanımlama yaparsak, içerisindeki yazı ya da fotoğraflar belirttiğimiz yüksekliği aştığında, sağ tarafa kaydırma çubuğu otomatik olarak eklenir.
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
<style type="text/css">
#div1{
height:150px;
width:423px;
overflow: auto;
}
</style>
u scroll çubuğunu javascript kodları ile en aşağı sabitlememiz mümkün. Bunun için kullanılan scrollTop() metodu kullanabiliriz.
scrollTop()
scrollTop() metodu kaydırma çubuğunun(scrollbar) dikey konumu döndürür ya da belirler. Kaydırma çubuğunun dikey pozisyonu, üst noktadan çubuğun bulunduğu konuma kadar olan yerin pixel değerindeki yüksekliğidir. Eğer scrollbar en üst noktadaysa, 0 değeri geri döner.
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
<script type="text/javascript">
document.getElementById("div1").scrollTop =3000;
</script>
Aşağıdaki kodları bir html sayfası olarak kaydedip, sayfayı görüntüleyin. “Aşağı Kaydır” butonuna tıkladığınızda scroll çubuğunu aşağı kaydıracaktır.
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
<HTML>
<HEAD>
<TITLE>Kaydırma çubuğu Scrollbar</TITLE>
<style type="text/css">
#div1{
height:100px;
width:423px;
overflow: auto;
color:#000;
font-size:14px;
}
</style>
<script type="text/javascript">
function asagikaydir()
{
var scrollheight = 6000;
document.getElementById("div1").scrollTop = scrollheight;
}
</script>
</HEAD>
<BODY>
<div id="div1">
<p>ScrollTop örnegi</p>
<p>Kaydırma çubuğunu aşağı sabitlemek</p>
<p>div alanında scrollbar</p>
<p>css overflow</p>
<p></p>
<p></p>
<p></p>
</div>
<button onclick="asagikaydir()">Aşağı Kaydır</button>
</BODY>
</HTML>
Dikkat edilmesi gereken bir diğer şey ise Firefox tarayıcısında scrollheight değeri çok yüksek verildiğinde (1000000000000 gibi) çalışmaması. Bunun için çok büyük değerler yerine daha küçükleri kullanılmalıdır. Diğer tarayıcılarda Chrome, IE7+ vs. sorunsuz çalışmaktadır.