防止div跌破div时向上滚动?
昨天我问了一个类似的问题,但解释得很差,并且没有说明我对纯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 …