javascript - 防止 div 被其下方的 div 碰撞时向上滚动？

Question

我问 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>

Answer 1

这是一个您可能喜欢的有趣解决方案。

我们对 div 的了解是，它仅保留滚动条的顶部位置，因此如果高度因任何原因发生变化，滚动条将保持不变，这就是导致您出现问题的原因。

作为解决方法，您可以翻转 .messages 180 度使用 transform: rotate(180deg) scaleX(-1);并翻转.message要取消翻转内容，则 div 将自动保持底部滚动条(顶部)。

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%;
  transform: rotate(180deg) scaleX(-1);
}

.message
{
  transform: rotate(180deg) scaleX(-1);
}
.send-message {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.some-margin {
  margin-bottom: 100px;
}

<div class="container">
  <div class="messages">
  <div class="message">hello1</div>
  <div class="message">hello2</div>
  <div class="message">hello3</div>
  <div class="message">hello4</div>
  <div class="message">hello5</div>
  <div class="message">hello6</div>
  <div class="message">hello7</div>
  <div class="message">hello8</div>
  <div class="message">hello9</div>
  <div class="message">hello10</div>
  <div class="message">hello11</div>
  <div class="message">hello12</div>
  <div class="message">hello13</div>
  <div class="message">hello14</div>
  <div class="message">hello15</div>
  <div class="message">hello16</div>
  <div class="message">hello17</div>
  <div class="message">hello18</div>
  <div class="message">hello19</div>
  <div class="message">hello20</div>
  </div>
  <div class="send-message">
  <input />
  </div>
</div>

<button onclick="test()">add margin</button>