Ayer hice una pregunta similar, pero la expliqué mal y no especifiqué mi deseo de una solución de CSS puro, que creo que debería ser posible, así que lo estoy intentando nuevamente.
Básicamente, tengo un problema en el que tengo un div de mensajes desplazables y un campo de entrada debajo de él. Cuando hago clic en un botón, me gustaría que el campo de entrada se incremente 100 píxeles, sin que la división de mensajes se desplace también.
Aquí hay un violín que demuestra el problema en su totalidad
Como puede ver, cuando hace clic en el botón "Agregar margen", la división de mensajes también se desplaza hacia arriba. Me gustaría que se quedara donde estaba. Del mismo modo, si se desplaza ligeramente hacia arriba para que solo pueda ver el penúltimo mensaje, al hacer clic en el botón se debe mantener esa posición de manera similar al hacer clic.
Lo interesante es que este comportamiento se conserva "a veces". Por ejemplo, en algunas circunstancias (que no puedo deducir del todo) se conserva la posición de desplazamiento. Solo me gustaría que se comportara constantemente 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 se desplaza hacia arriba, es la altura del div que está disminuyendo. Entonces, ¿por qué es importante? Bueno, lo que significa es quescrollbarno está ajustando su posición. La barra de desplazamiento solo recuerda su posición relativa desde la parte superior de su contenedor. Cuando la altura del div disminuye, parece que la barra de desplazamiento se desplaza hacia arriba, pero en realidad no lo es.