Poprosiłem podobne pytanie wczoraj, ale wyjaśnił to źle, a nie określił moje pragnienie roztworu czystego CSS, które myślę, że powinno być możliwe, więc jestem znowu próbuje.
Zasadniczo mam problem polegający na tym, że mam div przewijalnych wiadomości i pole wprowadzania poniżej. Kiedy klikam przycisk, chciałbym, aby pole wejściowe zostało powiększone o 100 pikseli, bez przewijania div wiadomości.
Oto skrzypce, które pokazują problem w całości
Jak widać, po kliknięciu przycisku „dodaj margines”, div div również przewija się w górę. Chciałbym, żeby został na miejscu. Podobnie, jeśli jesteś lekko przewinięty w górę, aby zobaczyć tylko ostatnią wiadomość, kliknięcie przycisku powinno podobnie zachować tę pozycję po kliknięciu.
Interesujące jest to, że takie zachowanie jest „czasami” zachowane. Na przykład w niektórych okolicznościach (czego nie mogę do końca wywnioskować) pozycja przewijania jest zachowywana. Chciałbym tylko, żeby konsekwentnie zachowywał się jako taki.
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>
divprzewijanie w górę, to wysokość div, która maleje. Więc dlaczego to ma znaczenie? Cóż, to znaczy, żescrollbarnie dostosowuje swojej pozycji. Pasek przewijania zapamiętuje jedynie swoją pozycję względem góry kontenera. Gdy wysokość div spada, wydaje się, że pasek przewijania przewija się w górę, ale tak naprawdę nie jest.