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容器的底部而不滚动整个页面

回答

相关问题