Установка свойства прокрутки в верхней части элемента в реакции - PullRequest
Новая
       12

Установка свойства прокрутки в верхней части элемента в реакции

0 голосов
/ 18 декабря 2018

Итак, мы создаем приложение чата, в котором пользователь отправляет сообщение агенту для поддержки клиентов.В зависимости от вопроса агент отвечает с неизвестной длиной сообщения.Иногда проблема заключается в том, что сообщение длинное, а иногда отправляется несколько сообщений, потому что оно автоматизировано, и пользователь прокручивается вниз до нижней части страницы, что может привести к пропуску сообщений, ранее отправленных до этого последнего сообщения.Наше требование состоит в том, чтобы обрабатывать такие случаи, прокручивая пользователя только до верхней части первого сообщения, а не до нижней части страницы, когда отправляется несколько сообщений, чтобы пользователь мог прочитать первое до последнего.Как я смогу добиться этого с 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();
    }

Любая помощь будет принята с благодарностью.Спасибо!

...