Ieri ho fatto una domanda simile ma l'ho spiegata male e non ho specificato il mio desiderio di una soluzione CSS puro, che penso dovrebbe essere possibile, quindi ci riprovo.
Fondamentalmente, ho un problema in cui ho un div di messaggi scorrevoli e un campo di input sotto di esso. Quando faccio clic su un pulsante, vorrei che il campo di input fosse ingrandito di 100 pixel, senza far scorrere anche il div dei messaggi.
Ecco un violino che dimostra il problema nella sua interezza
Come puoi vedere, quando fai clic sul pulsante "aggiungi margine", anche il div div scorre verso l'alto. Vorrei che restasse dov'era. Allo stesso modo, se si scorre leggermente verso l'alto in modo da poter vedere solo il penultimo messaggio, facendo clic sul pulsante si dovrebbe mantenere tale posizione allo stesso modo al clic.
La cosa interessante è che questo comportamento è "a volte" preservato. Ad esempio, in alcune circostanze (che non riesco a dedurre del tutto) la posizione di scorrimento viene mantenuta. Vorrei solo che si comportasse costantemente come tale.
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>
divche sta scorrendo verso l'alto, è l'altezza del div che sta diminuendo. Allora perché questo importa? Bene, ciò significa chescrollbarnon sta regolando la sua posizione. La barra di scorrimento ricorda solo la sua posizione relativa dalla parte superiore del suo contenitore. Quando l'altezza del div diminuisce, sembra che la barra di scorrimento scorra verso l'alto, ma in realtà non lo è.