React - 滾動到flex容器的底部而不滾動整個頁面

我使用了react並嘗試構建一個類似於chat的Facebook - 其中右列向下滾動並具有線程列表，中間列有線索內容和卷軸自下而上。React - 滾動到flex容器的底部而不滾動整個頁面

我已經使用flex的所有設置，但我堅持讓中間列默認滾動到底部（因爲我想看到最新的聊天消息）。下面是實際容器的片段（我使用的陣營引導）：

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

，這裏是我的ComponentDidMount片斷：

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

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

}

凡續是容器DIV裁判說擁有我的信息。然而什麼也沒有發生 - 它不會滾動，如果我在設置它後查看node.scrollTop，它仍然是0 - 看起來不可變。任何幫助將不勝感激。謝謝！

來源

2017-03-09 Phoenix20

不知道你的CSS的細節，但我只是有一個外觀類似的問題。在我的情況的解決方案是，以確保該元素本身將滾動，而不是它的容器：

.containerIWantToScroll { 
    overflow-y: auto; 
}

如果元素的容器擴展以適應元素，那麼該元素不會滾動，因此它的scrollTop值始終零。

來源

2017-04-25 23:29:08 waterproof

謝謝，這工作！ – Phoenix20

太棒了！ Upvote我的答案並將其標記爲正確的，然後呢？ – waterproof

我嘗試過 - 我是新手，沒有足夠的聲望來記錄它。當我這樣做時，我會回來再做一次。謝謝。 – Phoenix20

你什麼時候觸發你包含的代碼？要滾動到上渲染下，我會寫類似下面的，在componentDidMount調用triggerScroll：

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

來源

2017-03-09 04:57:33 Donald

我在ComponentDidMount中做它。我有我在上面列出的代碼在該方法的末尾，ref被定義爲'ref ='cont''。如果我輸出node.scrollHeight的值，它會給出一個看起來正確的值，但即使賦值，node.scrollTop仍然爲0。有趣的是，如果我改變它來使用你的語法，我現在未定義'this.cont.scrollHeight'（但'this.cont'被定義並且是適當的對象） – Phoenix20

我剛纔編輯了我的問題以反映你所提出的改變並顯示兩個相關的代碼片段。 – Phoenix20

嗯，這很奇怪'scrollHeight'在使用我的語法時未定義。基於這個問題（http://stackoverflow.com/questions/37620694/how-to-scroll-to-bottom-in-react），如果你把ref放在最近的消息上，並使用'.scrollIntoView（）'在上面？ – Donald

React - 滾動到flex容器的底部而不滾動整個頁面

回答

相關問題