Fiz uma pergunta semelhante ontem, mas a expliquei mal e não especifiquei meu desejo por uma solução CSS pura, o que acho que deveria ser possível, então estou tentando novamente.
Basicamente, tenho um problema em que tenho uma div de mensagens roláveis e um campo de entrada abaixo dele. Quando clico em um botão, gostaria que o campo de entrada aumentasse 100 pixels, sem que a div das mensagens também fosse rolada.
Aqui está um violino que demonstra o problema em sua totalidade
Como você pode ver, quando você clica no botão "adicionar margem", a div das mensagens também é exibida. Eu gostaria que ficasse onde estava. Da mesma forma, se você estiver levemente rolado para cima para poder ver apenas a penúltima e última mensagem, clicar no botão deve manter a mesma posição ao clicar.
O interessante é que esse comportamento é "às vezes" preservado. Por exemplo, em algumas circunstâncias (que não posso deduzir), a posição de rolagem é mantida. Eu gostaria que ele se comportasse de maneira consistente como tal.
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>
divque está rolando para cima, é a altura da div que está diminuindo. Então, por que isso importa? Bem, o que isso significa é que oscrollbarnão está ajustando sua posição. A barra de rolagem lembra apenas sua posição em relação à parte superior do contêiner. Quando a altura da div diminui, parece que a barra de rolagem está rolando para cima, mas na verdade não está.