我昨天问了一个类似的问题，但解释得不好，并且没有说明我对纯 CSS 解决方案的渴望，我认为这应该是可能的，所以我再试一次。
基本上，我有一个问题，我有一个可滚动消息的 div 和它下面的输入字段。当我单击一个按钮时，我希望输入字段提高 100 像素，而消息的 div 也不会滚动。
如您所见，当您单击“添加边距”按钮时，消息 div 也会向上滚动。我希望它留在原地。同样，如果您稍微向上滚动以便只能看到倒数第二条消息，则单击该按钮应在单击时同样保持该位置。
有趣的是，这种行为“有时”会被保留。例如，在某些情况下（我不能完全推断）滚动位置被保留。我只是希望它始终如一地表现。
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> …