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

【问题标题】：React - scrolling to the bottom of a flex container without scrolling the whole pageReact - 滚动到 flex 容器的底部而不滚动整个页面
【发布时间】：2017-07-29 22:36:47
【问题描述】：

我正在使用 react 并尝试构建一个类似聊天的 facebook - 其中右列向下滚动并有一个线程列表，中间列有线程内容并自下而上滚动。

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

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

这是我的 ComponentDidMount 的 sn-p：

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

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

}

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

【问题讨论】：

标签： reactjs dom scrolltop react-dom

【解决方案1】：

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

.containerIWantToScroll {
    overflow-y: auto;
}

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

【讨论】：

太棒了！支持我的答案并将其标记为正确，然后呢？
我试过了 - 我是 SO 新手，还没有足够的声誉来记录它。当我这样做时，我会回来再做一次。谢谢。

【解决方案2】：

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

【讨论】：

我在 ComponentDidMount 中做。我在该方法的末尾有上面列出的代码，并且引用定义为ref='cont'。如果我输出 node.scrollHeight 的值，它会给出一个看起来正确的值，但 node.scrollTop 即使有赋值也保持为 0。有趣的是，如果我将其更改为使用您的语法，我现在会为 this.cont.scrollHeight 得到未定义（但 this.cont 已定义并且是正确的对象）
我刚刚编辑了我上面的问题，以反映您建议的更改并显示两个相关的代码。
嗯，很奇怪scrollHeight 在使用我的语法时是未定义的。基于这个问题（stackoverflow.com/questions/37620694/…），如果您将 ref 放在最近的消息上，并在上面使用 .scrollIntoView() 呢？
我试过了。问题是 scrollIntoView 使整个页面滚动并在左侧列中产生抖动效果 - 它似乎不包含在消息的容器中。