Empêcher la div de défiler vers le haut lorsqu'elle est heurtée par la div située en dessous ?

Question

J'ai demandé une question similaire hier mais je l'ai mal expliqué et je n'ai pas précisé mon souhait d'une solution purement CSS, ce qui devrait être possible, je pense, donc je réessaie.

En gros, j'ai un problème où j'ai un div de messages défilants et un champ de saisie en dessous. Lorsque je clique sur un bouton, j'aimerais que le champ de saisie soit remonté de 100 pixels, sans que la division de messages ne défile également.

Voici un violon qui démontre le problème dans son intégralité

Comme vous pouvez le voir, lorsque vous cliquez sur le bouton "Ajouter une marge", la section des messages défile également vers le haut. Je voudrais qu'elle reste là où elle était. De même, si vous faites légèrement défiler la page vers le haut de sorte que vous ne pouvez voir que l'avant-dernier message, le fait de cliquer sur le bouton devrait également permettre de conserver cette position.

Ce qui est intéressant, c'est que ce comportement est "parfois" préservé. Par exemple, dans certaines circonstances (que je ne peux pas vraiment déduire), la position du défilement est conservée. J'aimerais simplement qu'il se comporte ainsi de manière cohérente.

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>

Answer 1

On peut très simplement l'aborder avec des noms d'ancrage. Regardez le bidule JS à https://jsfiddle.net/gvbz93sx/

Changement HTML <a name="bottom"></a>

Changement de JS document.location.hash = "#bottom";