リアクション - ページ全体をスクロールせずにフレックスコンテナの底にスクロールする

Question

私はリアクションを使用してチャットのようなフェイスブックを構築しようとしています - 右側の列がスクロールしてスレッドのリストを持ち、スレッドの内容とスクロールボトムアップ。

私はflexを使用してすべての設定をしていますが、デフォルトでは中央の列を下にスクロールすることに固執しています（最新のチャットメッセージを見たいので）。ここでは、実際のコンテナのスニペットは、（私は、ブートストラップリアクト使用しています）です：

<Row > 
    <Col ref={ (node) => { this.cont = node }}> 
           {this._buildThread()}; 
    </Col> 
</Row> 

、ここでは私のComponentDidMountのためのスニペットです：

CONTは、そのコンテナのdivのための参照です

componentDidMount() { 
    MessageStore.addChangeListener(this._onChange); 
    MessageService.getThread(this.props.id, 1000, 1, false); 

    this.cont.scrollTop = this.cont.scrollHeight; 

} 

私のメッセージを保持しています。しかし、何も起こらない - それはスクロールせず、node.scrollTopを設定した後に見ると、0のままである - 不変のようだ。 ご協力いただければ幸いです。ありがとう！

Answer 1

わからないが、私はちょうど似て見える問題があった：レンダリングの一番下までスクロールするには、私はcomponentDidMountでtriggerScrollを呼び出して、次のようなものを書くでしょう。したがって、そのscrollTop値は常に、要素のコンテナは、その要素がスクロールしないであろう、要素にフィットするように拡大した場合

.containerIWantToScroll { 
    overflow-y: auto; 
} 

：私の場合はソリューションは、要素自体は、そのコンテナをスクロールしないだろうことを確認しましたゼロ。

Answer 2

含まれているコードはいつトリガーしますか？あなたのCSSの詳細について

class App extends React.Component { 
    componentDidMount() { 
     this.triggerScroll(); 
    } 

    triggerScroll() { 
     this.cont.scrollTop = this.cont.scrollHeight; 
    } 

    render() { 
     return (
      <div> 
       <div className='containerIWantToScroll' ref={ (node) => { this.cont = node } }> 
        Content 
       </div> 
      </div> 
     ) 
    } 
}