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的ref。然而没有任何反应 - 它不会滚动，如果我在设置它之后查看node.scrollTop，它仍然是0 - 似乎是不可变的。任何帮助将非常感激。谢谢！

Answer 1

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

.containerIWantToScroll {
    overflow-y: auto;
}

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

Answer 2

您何时触发所包含的代码？要在渲染时滚动到底部，我会写出如下内容，在triggerScroll中调用componentDidMount：

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

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

2 个答案: