【发布时间】：2020-04-22 23:47:24
【问题描述】：
我昨天问了a similar question，但解释得很糟糕，并没有说明我对纯 CSS 解决方案的渴望，我认为这应该是可能的，所以我再试一次。
基本上，我有一个问题，我有一个可滚动消息的 div 和它下面的输入字段。当我单击一个按钮时，我希望输入字段向上增加 100 像素，而消息的 div 也不滚动。
Here is a fiddle that demonstrates the problem in its entirety
如您所见，当您单击“添加边距”按钮时，消息 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>【问题讨论】：
-
你好，我是用JS回答你问题的人。我想告诉你一件你可能误解的事情。您提到：messages div 也会向上滚动。实际上，向上滚动的不是
div，而是 div 的高度在减少。那么这有什么关系呢？嗯，这意味着scrollbar没有调整它的位置。滚动条仅记住其相对于其容器顶部的位置。当 div 的高度减小时，滚动条似乎在向上滚动，但实际上并非如此。 -
您的帖子非常有意义（从某种意义上说，人们知道您想要什么结果），但我只是分享一些东西，以防您不了解知识（以防它可能对您有所帮助提出解决上述问题的想法）;-)
-
是的，非常正确，感谢您的澄清。它只是“看起来”像是在向上滚动，因为您看不到曾经可以看到的较低内容。实际上，滚动位置没有改变。有点错觉。是的，这可能有助于提出解决方案。
标签： javascript html css scroll scrollbar