兄弟divが縮小または拡大するにつれてdivのスクロール位置を保持しますか？ここで

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の内部には、2つの子divがあります。上の1つはスクロール可能（メッセージを表示する）で、下はメッセージを送信するためのものです。

私は両方の子divが常に親divの高さに等しいように高さをコントロールするためにフレックスボックスを使用しています。一番下の子divは下の子divの高さに基づいて拡大または縮小します（これもやっています）。

問題は、高さの変更に合わせてスクロール位置を保持したいということです。私がトップの子divの一番下にスクロールして 'hello'を見ると、私は下のdivに複数の行を入力しているので、まだ 'hello'を見たいと思っています。しかし、代わりに、私が手動でスクロールしてそれを明らかにしない限り、下のdivが隠すように見えます。

私はこれが十分にはっきりしたことを望みますが、そうでない場合は別の方法で説明することができます。

私の答えがCSS（またはCSS3）にあることを期待していますが、それが不可能な場合は、jqueryまたはpure javascriptが問題ありません。

Answer 1

設定scrollHeightからscrollTop等しい：あなたがOKのjQueryを使用している場合

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);

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

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