React - 滚动到 flex 容器的底部而不滚动整个页面

Question

我正在使用 React 并尝试构建一个类似聊天的 Facebook - 右栏向下滚动并有一个主题列表，中间栏有主题内容并向下滚动。

我使用 flex 进行了所有设置，但我坚持让中间列默认滚动到底部（因为我想查看最新的聊天消息）。这是实际容器的片段（我使用的是 React bootstrap）：

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

}

其中 cont 是保存我的消息的容器 div 的引用。然而什么也没有发生——它不滚动，如果我在设置后查看 node.scrollTop，它仍然为 0——似乎是不可变的。任何帮助将非常感激。谢谢！

Answer 1

您什么时候触发包含的代码？要在渲染时滚动到底部，我会写类似下面的内容，在 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>
        )
    }
}

Answer 2

不确定您 CSS 的详细信息，但我遇到了类似的问题。我的解决方案是确保元素本身会滚动而不是它的容器：

.containerIWantToScroll {
    overflow-y: auto;
}

如果元素的容器扩展以适合元素，则该元素将不会滚动，因此其 scrollTop 值始终为零。

React - 滚动到 flex 容器的底部而不滚动整个页面

React - scrolling to the bottom of a flex container without scrolling the whole page

reactjs

dom

scrolltop

react-dom