私は昨日、同様の質問をしましたが、説明が不十分であり、純粋なCSSソリューションへの私の希望を明記していませんでした。
基本的に、スクロール可能なメッセージのdivとその下に入力フィールドがあるという問題があります。ボタンをクリックしたときに、メッセージのdivもスクロールせずに、入力フィールドを100ピクセル増やしたいと思います。
ご覧のように、「マージンを追加」ボタンをクリックすると、メッセージのdivも上にスクロールします。そのままにしてもらいたいです。同様に、少し上にスクロールして最後から2番目のメッセージしか表示できない場合、ボタンをクリックしても、クリックしたときにその位置が維持されるはずです。
興味深いのは、この動作が「ときどき」維持されることです。たとえば、状況によっては（かなり推測することはできません）、スクロール位置が保持されます。私はそれが一貫してそのように振る舞うことを望みます。
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>
あなたの投稿は（あなたが望む結果を人々が知っているという意味で）完全に理にかなっていますが、知識があなたに明らかでない場合に備えて、私は何かを共有しています（解決するためのアイデアを思い付くのに役立つ場合があります）上記の問題）;-)
—
Richard
わかりました。ありがとうございます。上にスクロールしているように「見える」だけです。以前は見られなかった下位のコンテンツを見ることができないからです。実際には、スクロール位置は変わりません。ちょっとした幻想。ええ、それは解決策を考え出すのに役立つかもしれません。
—
Ryan Peschel
divスクロールしているのはそれではなく、減少しているdivの高さです。では、なぜこれが問題になるのでしょうか。まあ、それが意味することは、scrollbarその位置を調整していないということです。スクロールバーは、コンテナの上からの相対的な位置のみを記憶します。divの高さが減少すると、スクロールバーが上にスクロールしているように見えますが、実際には上にスクロールしていません。