Question

因此，我们正在构建一个聊天应用程序，其中用户向代理发送消息以寻求客户支持。根据问题的不同，代理会回复未知的消息长度。问题是有时一条消息很长，有时一次发送多条消息，因为它是自动发送的，并且用户向下滚动到页面底部，容易丢失先前在最后一条消息之前发送的消息。我们的要求是通过发送多个消息时仅将用户滚动到第一条消息的顶部而不滚动到页面的底部来处理此类情况，以便用户可以通读第一条消息到最后一条消息。我将如何使用React实现这一目标。我当前的代码如下：

setScroll方法

setScroll() {
    if (!this.scroller) return;
    let { autoScroll = true } = this.props;
    if (!autoScroll) return;

    this.scroller.scrollTop =  this.scroller.scrollHeight;
}}

获取并显示消息的渲染方法

render() {
    let {
        noScroller = false,
        containerStyle = {},
        loading, className = '' } = this.props;

    if (noScroller) return this.getList();

    return (
        <section
            style={containerStyle}
            ref={c => this.scroller = c}
            className={classNames(className, style.scroller)}>
            {this.getList()}
        </section>
    );
}

最后

componentDidUpdate() {
        this.setScroll();
    }

    componentDidMount() {
        this.setScroll();
    }

任何帮助将不胜感激。谢谢！

将scroll属性设置为react中元素的顶部

0 个答案: