Sayfa açılışında div’in en altı nasıl gösterilir?

Bir tasarım üzerine son sürat çalışırken karşınıza küçük bir engel çıkar ve saatlerinizin boş yere uçup gitmesine sebep olur. Bu makalenin çıkış noktası da bu minik sorunlardan birinin çözümü ile alakalı.

Web sayfanız açıldığında overflow tanımlı bir öğenizin kaydırma çubuğunun (scroll) en altta olmasını istiyorsanız doğru makaledesiniz.

Örneğin bir chat sistemi hazırladığımızı varsayalım. Yeni yazılan mesajlar bir div’in içerisine otomatik olarak ekleniyor. Yukarıdan aşağıya doğru eskiden güncele bir listeleme yapılıyor. Kullanıcılar bu chat sistemine girdiğinde o div’in en üstündeki eski mesajı değil, en alttaki güncel mesajı görüntülemeli. İşte sizlerle birlikte hazırlayacağımız JavaScript kodu da tam olarak bu işlevi görüyor.

Nasıl hazırlanır?

Öncelikle üzerinde çalışmak için bir <div> oluşturalım. Aşağıda örnekte kullandığım kodlar mevcut. Burada önemli olan div’e bir ID tanımlaması yapmamız. Örneğimizde ise bu tanımlama adobewordpress şeklinde.

HTML Kodları

<div id="adobewordpress">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis consequat iaculis. Cras bibendum libero a massa pretium molestie. Nunc non mauris nulla. Vestibulum massa magna, semper ac fermentum ac, imperdiet ac purus. Donec eu sapien rutrum dui posuere sollicitudin. Nulla quis fermentum ipsum. Suspendisse eu hendrerit leo. Donec congue arcu libero, nec lacinia leo gravida vitae. Donec libero diam, convallis et molestie a, ornare eu lorem.</p>
<p>Vestibulum augue ipsum, euismod tristique tempor id, ornare ac nunc. Donec nulla ligula, ullamcorper sit amet congue non, sodales sed sapien. Curabitur ut placerat sapien, venenatis dapibus nunc. Curabitur sit amet elit eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas quis quam risus. Praesent blandit justo vitae varius posuere. Cras dignissim metus et leo tempus pretium. Quisque vitae leo nunc. Ut scelerisque tempus vehicula. Integer sollicitudin volutpat augue, in volutpat justo tempus eget. In at nunc risus. Praesent congue scelerisque facilisis.</p>
<p>Div'in en altı burası</p>
</div>

Şimdi geldik CSS kodlarımıza. Burada 3 tanımlama yapacağız : Uzunluk, genişlik ve overflow. Bu tanımlamalar sayesinde div üzerinde kaydırma çubuğu gözükecek, div sabit bir boyutta gösterilecek.

CSS Kodları

#adobewordpress{
  width:200px;
  height:200px;
  overflow:auto;
}

Ve son olarak JavaScript kodlarımız geliyor. Buradaki kodları div’in altına yerleştirmeniz gerekmekte. focusBottom tanımlamasıyla adobewordpress ID’li öğeye erişiyoruz, daha sonra ise div için açılışa varsayılan scroll mesafesini belirtiyoruz.

JS Kodları

<script type="text/javascript">
var focusBottom = document.getElementById("adobewordpress");
focusBottom.scrollTop = focusBottom.scrollHeight;
focusBottom.scrollLeft = focusBottom.scrollWidth;
</script>

Şimdi bu çalışmamızı Codepen üzerinden canlı olarak test edelim.

Örnek