Question

这是我目前所拥有的： https://jsfiddle.net/Lt4cmfbo/

CSS

.parent {
    position: relative;
    float: none;
    height: 400px;
    width: auto;
    background: purple;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.childOne {
  background: blue;
  width: 100%;
  height: auto;
  overflow-y: auto;
  flex-grow: 1;
}

.childTwo {
  background: red;
}

.input-chat {
    background-color: white;
    margin: 5px auto;
    border: solid 1px #000;
    min-height:10px;
    max-height: 100px;
    overflow: auto;
    width: 95%;
}

HTML

<div class="parent">
  <div class="childOne">
    <p>
      content #1
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      hello
    </p>
  </div>
  <div class="childTwo">
      <div class="input-chat" contentEditable="true"></div>
  </div>
</div>

基本上，我正在尝试建立聊天。父div的内部是两个子div：顶部是可滚动的（用于显示消息），而底部的div用于键入要发送的消息。

我正在使用弹性框控制高度，以便两个div div总是等于父div高度。底部子div必须根据内容（我已经完成）扩展或缩小，而顶部子div根据底部子div的高度（我已经完成）扩展或缩小。

问题是我还希望顶部div在其高度变化时保持其滚动位置。如果我滚动到顶部子div的底部并看到“你好”，我仍然希望看到“你好”＃39;因为我在底部div中输入了几行。但相反，底部div似乎隐藏它，除非我手动滚动显示它。

我希望这很清楚，但如果不是，我可以尝试用其他方式来解释。

我希望我的答案是在CSS（或CSS3）中，但如果那不可能，jquery或纯javascript就可以了。

Answer 1

将scrollTop设为等于scrollHeight：

＆＃13;

let c1 = document.querySelector('.childOne'),
  c2 = document.querySelector('.childTwo>div'),
  b = document.querySelector('button');

b.addEventListener(
  'click', () => {
    c1.innerHTML += '<br>' + c2.innerHTML;
    c1.scrollTop = c1.scrollHeight;
    c2.innerHTML = '';
    c2.focus();
  },
  false);

＆＃13;

.parent {
  position: relative;
  float: none;
  height: 400px;
  width: auto;
  background: purple;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.childOne {
  background: blue;
  width: 100%;
  height: auto;
  overflow-y: auto;
  flex-grow: 1;
}
.childTwo {
  background: red;
}
.test {
  background-color: white;
  margin: 5px auto;
  border: solid 1px #000;
  min-height: 10px;
  max-height: 100px;
  overflow: auto;
  width: 95%;
}

＆＃13;

<div class="parent">
  <div class="childOne">
    <p>
      content #1
      <br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br>
      <br><br>hello
    </p>
  </div>
  <div class="childTwo">
    <div class="test" contentEditable="true"></div>
    <button>
      Add</button>
  </div>
</div>

＆＃13;

当兄弟div收缩或扩展时，保持div中的滚动位置？

1 个答案: