Javascript 当同级div收缩或扩展时，是否在div中保持滚动位置？

以下是我目前拥有的：

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>

内容#1








































你好

基本上，我想建立一个聊天室。父div内部有两个子div：顶部的一个子div可滚动（用于显示消息），底部的一个子div用于键入要发送的消息

我使用弹性盒来控制高度，以便两个子div一起始终等于父div高度。底部子div必须根据内容展开或收缩（我已经做过），而顶部子div根据底部子div的高度展开或收缩（我也做过）

问题是，我还希望顶部div在其高度变化时保持其滚动位置。如果我滚动到顶部子分区的底部并看到“hello”，我仍然希望在底部分区中键入几行时看到“hello”。但是，底部分区似乎隐藏了它，除非我手动滚动以显示它

我希望这足够清楚，但如果不清楚，我可以尝试用其他方式解释

---

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

将

scrollTop

设置为等于

scrollHeight

：

let c1=document.querySelector（'.childOne'），
c2=document.querySelector（'.childTwo>div'），
b=document.querySelector（“按钮”）；
b、 加法器(
'点击'，（）=>{
c1.innerHTML+='
'+c2.innerHTML；
c1.滚动顶部=c1.滚动高度；
c2.innerHTML=''；
c2.焦点（）；
},
假）
.parent{
位置：相对位置；
浮动：无；
高度：400px；
宽度：自动；
背景：紫色；
溢出：隐藏；
显示器：flex；
弯曲方向：立柱；
}
childOne先生{
背景：蓝色；
宽度：100%；
高度：自动；
溢出y：自动；
柔性生长：1；
}
.孩子二号{
背景：红色；
}
.测试{
背景色：白色；
保证金：5px自动；
边框：实心1px#000；
最小高度：10px；
最大高度：100px；
溢出：自动；
宽度：95%；
}


内容#1






















你好

添加
将
滚动顶部设置为等于
滚动高度
：


let c1=document.querySelector（'.childOne'），
c2=document.querySelector（'.childTwo>div'），
b=document.querySelector（“按钮”）；
b、 加法器(
'点击'，（）=>{
c1.innerHTML+='
'+c2.innerHTML；
c1.滚动顶部=c1.滚动高度；
c2.innerHTML=''；
c2.焦点（）；
},
假）
.parent{
位置：相对位置；
浮动：无；
高度：400px；
宽度：自动；
背景：紫色；
溢出：隐藏；
显示器：flex；
弯曲方向：立柱；
}
childOne先生{
背景：蓝色；
宽度：100%；
高度：自动；
溢出y：自动；
柔性生长：1；
}
.孩子二号{
背景：红色；
}
.测试{
背景色：白色；
保证金：5px自动；
边框：实心1px#000；
最小高度：10px；
最大高度：100px；
溢出：自动；
宽度：95%；
}


内容#1






















你好

添加
如果您可以使用jQuery，则可以在滚动事件中使用并保存滚动位置，然后在用户按下“回车”键时滚动回该位置。问题是，我希望在用户按下“回车”键之前，滚动位置保持在原来的位置。话虽如此，您给了我一个如何用jquery解决这个问题的想法。。。但我想知道是否有更干净的解决方案？当我最初处理这个问题时，我给“childTwo”类增加了一个最小高度。这实际上阻止了最上面的孩子滚动（按照我想要的方式），但它弄乱了底部div的外观，所以我无法保留它。我猜这个答案解决了它（如何使滚动保持在底部）：。。。。如果有，请告诉我，我会闭上这个眼睛！！！这正是我所需要的。非常感谢你@LGSonIf如果使用jQuery没有问题，那么可以在滚动事件中使用并保存滚动位置，然后在用户按下“Enter”键时滚动回该位置。问题是，我希望它在用户按下“Enter”键之前仍保持在原来的位置。话虽如此，您给了我一个如何用jquery解决这个问题的想法。。。但我想知道是否有更干净的解决方案？当我最初处理这个问题时，我给“childTwo”类增加了一个最小高度。这实际上阻止了最上面的孩子滚动（按照我想要的方式），但它弄乱了底部div的外观，所以我无法保留它。我猜这个答案解决了它（如何使滚动保持在底部）：。。。。如果有，请告诉我，我会闭上这个眼睛！！！这正是我所需要的。非常感谢你@谢谢你的回答！但我可能不太清楚：我的问题是，当底部的子div扩展时，它会覆盖顶部div中的内容。因此，如果我滚动到底部，它会说“hello”，然后开始键入几行，扩展的div现在会覆盖“hello”，尽管高度似乎调整得很好。我感谢你的回答！但我可能不太清楚：我的问题是，当底部的子div扩展时，它会覆盖顶部div中的内容。因此，如果我滚动到底部，它会说“hello”，然后开始键入几行，扩展的div现在会覆盖“hello”，尽管高度似乎调整得很好。