防止 div 在被下面的 div 碰撞时向上滚动？

Question

我昨天问了一个类似的问题，但解释得不好，并且没有说明我对纯 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>
      <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 的了解是它只保留滚动条的顶部位置，因此如果高度由于任何原因发生变化，滚动条将保持不变，这就是导致您出现问题的原因。

作为解决方法，您可以使用翻转.messages180 度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>

Answer 2

滚动条的正常行为是位于顶部，因此当您在页面加载时将其设置为底部时，您必须自行维护它，因为当下面的内容推送它时，div 滚动将移动到顶部。

所以我给你两个解决方案：

1. 反转消息 div 内的消息，使最后一条消息成为第一条消息，这样滚动条将始终位于顶部。

2. 我创建了一个 javascript 函数来滚动到任何元素的底部，因此只要您想滚动到底部就可以调用它。

function scrollbottom(e)
    {
      e.scrollTop = e.clientHeight;
    }

检查片段

function scrollbottom(e)
    {
      e.scrollTop = e.clientHeight;
    }

var elem = document.querySelector(".messages");

window.onload = function(e){ 
  scrollbottom(elem);
}

function test() {
  document.querySelector(".send-message").classList.toggle("some-margin");
  scrollbottom(elem);
}

function scrollbottom(e)
{
  e.scrollTop = e.clientHeight;
}

.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;
}