Div için css scollbar aşağıdan başlasın

11-02-2018, 13:41:38

Merhaba arkadaşlar,
Bir div için scollbar özelliği ekledim ama div içindeki yazılar alttan yukarı dogru çıktıgı için sayfa açıldıgında scoolbar cubugunun aşağı çekilmiş olarak görünmesini istiyorum bunun için fikir verecek arkadaşlar yardımcı olursa sevinirim.
Mevcut olan şekliyle sayfaya gi,rildiginde scollbar aşağıdaki resimde oldugu gibi

ama ben sayfaya girildiginde aşağıdaki resimde oldugu gibi görünmesini istiyorum

Div içinde mesajlaşma yazıları görünüyor en son mesajda aşağıda çıkacagı için scollbar cubugunun aşağıda durması gerekiyor veya dive bu özelliği vermem için başka ne yapabilirim. ?
Scollbar css kodlarım aşağıda olduğu gibidir.

#yazismaalani::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #F5F5F5;
}
#yazismaalani::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}
#yazismaalani::-webkit-scrollbar-thumb {
    background-color: #fc6023;
}
#yazismaalani {
height: 450px;
    width: 100%;
    background: #F5F5F5;
    overflow-y: scroll;
}

11-02-2018, 13:51:24

#2

EmreCapan

paddin-alt:0px; olarak deneyebilir misin hocam ?
Olmadı ise dilerseniz bakabilirim.
Ek olarak: Margin veya padding ile alt kısımdan boşluk olmayacak şekilde yukarıda verdiğim kod gibi taban ile boşluğu sıfırlayıp açılışta alttan başlatabilirsiniz.
Ama olayları farklı olabilir, başka biryerden etkileniyor olabilir, şuan boş vaktim var inceleyebilirim.

11-02-2018, 14:03:58

#3

SurucLu

EmreCapan adlı üyeden alıntı: mesajı görüntüle

paddin-alt:0px; olarak deneyebilir misin hocam ?
Olmadı ise dilerseniz bakabilirim.
Ek olarak: Margin veya padding ile alt kısımdan boşluk olmayacak şekilde yukarıda verdiğim kod gibi taban ile boşluğu sıfırlayıp açılışta alttan başlatabilirsiniz.
Ama olayları farklı olabilir, başka biryerden etkileniyor olabilir, şuan boş vaktim var inceleyebilirim.

Tam anlamıyla bir css uygulaması yapmadım siteyi yeni tasarlıyorum sadece kemik kısmını yapıyorum görsele sonra geçeceğim ama scolbar kodlarını aldıgım yer aşağıdaki linkte mevcut ve aynen kullandım BURDAN bakabilirsiniz.dediginiz padding-bottom:0px; değilmi? mantıksal olarak bir kaç yere ekledim ama sonuçalamadım. verdigim linkteki örnek üzerinde nlatabilirsiniz.

11-02-2018, 15:07:13

#4

EmreCapan

SurucLu adlı üyeden alıntı: mesajı görüntüle

Tam anlamıyla bir css uygulaması yapmadım siteyi yeni tasarlıyorum sadece kemik kısmını yapıyorum görsele sonra geçeceğim ama scolbar kodlarını aldıgım yer aşağıdaki linkte mevcut ve aynen kullandım BURDAN bakabilirsiniz.dediginiz padding-bottom:0px; değilmi? mantıksal olarak bir kaç yere ekledim ama sonuçalamadım. verdigim linkteki örnek üzerinde nlatabilirsiniz.

Sanırım 1 saattir bununla uğraşıyorum, sonunda olayı farkedip çözebilme şansını yakaladım. Şimdi gereksiz sözlere girmeden olayı özetleyeyim.
Bu kodu head etiketlerinizin en başına koyuyuyorsunuz öncelikle.
$("div").scrollTop(); bu kodu javascript kullanarak üstten boşluk verebiliyoruz.
$("div").offset().top) bu kod ise mevcut scrollbar'ın bulunduğu alananın height değerini döndürüyor.
$("div").scrollTop($("div").offset().top); bu kullanımda ise scrollbarın bulunduğu kutunun height değerini alıp üstten boşluk bırakmaya yarıyor.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
 $(document).ready(function(){ $("div").scrollTop($("div").offset().top); });
 </script>

Umarım işinize yarar, div olan kısmı kendinize göre değiştirebilirsiniz.

11-02-2018, 15:11:11

#5

SurucLu

EmreCapan adlı üyeden alıntı: mesajı görüntüle

Sanırım 1 saattir bununla uğraşıyorum, sonunda olayı farkedip çözebilme şansını yakaladım. Şimdi gereksiz sözlere girmeden olayı özetleyeyim.
Bu kodu head etiketlerinizin en başına koyuyuyorsunuz öncelikle.
$("div").scrollTop(); bu kodu javascript kullanarak üstten boşluk verebiliyoruz.
$("div").offset().top) bu kod ise mevcut scrollbar'ın bulunduğu alananın height değerini döndürüyor.
$("div").scrollTop($("div").offset().top); bu kullanımda ise scrollbarın bulunduğu kutunun height değerini alıp üstten boşluk bırakmaya yarıyor.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").scrollTop($("div").offset().top); }); </script>
Umarım işinize yarar, div olan kısmı kendinize göre değiştirebilirsiniz.

Emeğin için çok çok teşekkür ederim bende sizin anlatımınıza benzer bir kaynak gördüm ve tam sorunu halledip buraya döndüğümde sizin cevabınızı gördüm. samimi duygularla gönülden teşekkür ediyorum.. BURDAKİ ADRESTE DE aynı dertten muzdaripbir karşerim var ve oda kodları paylaşmış..
Hayırlı çalışmalar..

11-02-2018, 15:13:14

#6

EmreCapan

SurucLu adlı üyeden alıntı: mesajı görüntüle

Emeğin için çok çok teşekkür ederim bende sizin anlatımınıza benzer bir kaynak gördüm ve tam sorunu halledip buraya döndüğümde sizin cevabınızı gördüm. samimi duygularla gönülden teşekkür ediyorum.. BURDAKİ ADRESTE DE aynı dertten muzdaripbir karşerim var ve oda kodları paylaşmış..
Hayırlı çalışmalar..

Estağfirullah, herhangi bir sorununuzda seve seve yardımcı olurum.
Sizlere de hayırlı çalışmalar