Saya mengajukan pertanyaan serupa kemarin tetapi menjelaskannya dengan buruk, dan tidak menentukan keinginan saya untuk solusi murni-CSS, yang saya pikir seharusnya mungkin, jadi saya coba lagi.
Pada dasarnya, saya memiliki masalah di mana saya memiliki div pesan yang dapat digulir dan bidang input di bawahnya. Ketika saya mengklik sebuah tombol, saya ingin bidang input ditabrak hingga 100 piksel, tanpa harus gulir div pesan juga.
Berikut adalah biola yang menunjukkan masalah secara keseluruhan
Seperti yang Anda lihat, ketika Anda mengklik tombol "tambahkan margin", div pesan juga akan bergulir. Saya ingin tinggal di tempat itu. Demikian pula, jika Anda sedikit digulir ke atas sehingga Anda hanya dapat melihat pesan kedua hingga terakhir, mengklik tombolnya juga harus mempertahankan posisi itu saat diklik.
Yang menarik adalah bahwa perilaku ini "kadang-kadang" dipertahankan. Misalnya, dalam beberapa keadaan (yang saya tidak bisa menyimpulkan) posisi gulir dipertahankan. Saya hanya ingin hal itu berlaku secara konsisten.
window.onload = function(e) {
document.querySelector(".messages").scrollTop = 10000;
};
function test() {
document.querySelector(".send-message").classList.toggle("some-margin");
}.container {
width: 400px;
height: 300px;
border: 1px solid #333;
display: flex;
flex-direction: column;
}
.messages {
overflow-y: auto;
height: 100%;
}
.send-message {
width: 100%;
display: flex;
flex-direction: column;
}
.some-margin {
margin-bottom: 100px;
}<div class="container">
<div class="messages">
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
<div class="message">hello</div>
</div>
<div class="send-message">
<input />
</div>
</div>
<button onclick="test()">add margin</button>
divyang bergulir ke atas, tapi ketinggian div yang menurun. Jadi mengapa ini penting? Nah, apa artinya adalah bahwascrollbartidak menyesuaikan posisinya. Scrollbar hanya mengingat posisinya relatif dari atas wadahnya. Ketika ketinggian div menurun, sepertinya scrollbar sedang bergulir, tetapi sebenarnya tidak.