J'ai posé une question similaire hier, mais je l'ai mal expliqué et je n'ai pas précisé mon désir d'une solution pure CSS, ce qui, je pense, devrait être possible, alors j'essaie à nouveau.
Fondamentalement, j'ai un problème où j'ai une div de messages déroulants et un champ de saisie en dessous. Lorsque je clique sur un bouton, je souhaite que le champ de saisie soit augmenté de 100 pixels, sans que la division des messages défile également.
Voici un violon qui illustre le problème dans son intégralité
Comme vous pouvez le voir, lorsque vous cliquez sur le bouton "ajouter une marge", la div des messages défile également vers le haut. J'aimerais qu'il reste où il était. De même, si vous faites légèrement défiler vers le haut de sorte que vous ne puissiez voir que l'avant-dernier message, un clic sur le bouton devrait également conserver cette position lors du clic.
La chose intéressante est que ce comportement est "parfois" préservé. Par exemple, dans certaines circonstances (que je ne peux pas vraiment déduire), la position de défilement est conservée. Je voudrais juste qu'il se comporte toujours comme tel.
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>
divqui défile, c'est la hauteur du div qui diminue. Alors, pourquoi est-ce important? Eh bien, cela signifie que l'scrollbarajustement de sa position n'est pas. La barre de défilement ne se souvient que de sa position par rapport au haut de son conteneur. Lorsque la hauteur du div diminue, il semble que la barre de défilement défile vers le haut, mais ce n'est pas le cas.