昨天我问了一个类似的问题，但解释得很差，并且没有说明我对纯CSS解决方案的渴望，我认为这应该是可能的，因此我正在尝试。
基本上，我遇到了一个问题，即我有一个可滚动消息div，并且在其下方有一个输入字段。当我单击一个按钮时，我希望输入字段增加100像素，而消息区域也不滚动。
如您所见，当您单击“添加边距”按钮时，消息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>
<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>
您的帖子非常合理（从某种意义上说，人们知道您想要什么结果），但是我只是在分享一些信息，以防您对知识不了解（以防它可能帮助您提出解决方案）说问题）;-)
—
理查德
是的，非常正确，感谢您的澄清。它只是像向上滚动一样“看起来”，因为您看不到曾经可以看到的较低内容。实际上，滚动位置并没有改变。有点幻觉。是的，这可能有助于提出解决方案。
—
Ryan Peschel
div向上滚动，而是div的高度在减小。那么为什么这很重要呢？好吧，这意味着scrollbar不会调整其位置。滚动条仅从容器顶部记住其相对位置。当div的高度减小时，滚动条似乎在向上滚动，但实际上并非如此。