Question

您好我正在构建一个应用程序，其中有一个列表和组件挂载我总是想要到列表的底部。

这是我的render方法

<div className="message-placeholder" 
                 ref={this.myRef}>
                <List
                    dataSource={this.state.data}
                    renderItem={item => (
                    <List.Item key={item.id}>
                        <List.Item.Meta
                            avatar={<Avatar style={{ backgroundColor: '#08c' }} icon="user" />}
                            title={<a href="#">{item.name}</a>}
                            description={item.message}
                        />
                    </List.Item>
                    )}
                >
                    {this.state.loading && this.state.hasMore && <Spin className="demo-loading" />}
                </List>

在我的构造函数中，我创建了一个新的ref。像这样

constructor(props){
        super(props);
        this.myRef = React.createRef();

我的css看起来像这样。

.message-placeholder {
    height: 300px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

现在每次组件更新时我都会尝试转到列表的底部。以下是我的表现方式。

componentDidUpdate() {
        this.scrollToBottom();
    }

scrollToBottom = () => {
        this.myRef.scrollIntoView({block: 'end', behavior: 'smooth'});
    }

但是，这不起作用我收到以下错误_this.myRef.scrollIntoView is not a function

请有人帮我解决这个问题。提前致谢。：）

Answer 1

您可以使用此功能将特定部分滚动到bottom

document.querySelector(".message-placeholder").scrollTo(0,document.querySelector(".message-placeholder").scrollHeight);

并且scrollIntoView没有良好的浏览器兼容性检查这一点 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#Browser_compatibility。

Answer 2

我建议使用像react-scroll

这样的专用软件包

Answer 3

<div className="message-placeholder" ref={(ref) => { this.myRef = ref; }}>

无法使用React.js refs滚动到div的底部

3 个答案: