javascript - 为什么我的数组项被添加到顶部，而滚动条仍保留在顶部？

Question

我正在创建一个聊天应用程序，我想在单击顶部的按钮时加载更多消息。它工作得很好，但是当我单击“加载更多”按钮时，项目会添加到顶部，并且滚动位置保持在顶部。但是我想加载它们，并且滚动位置必须保留在最后一个最上面的项目。现在我的代码如下:

Chat.js返回方法

    return (
        <div className="page">
            <div className="page__title">Chat</div>

            <article className="chat">
                {!!conversations.length && (
                    <div className="chat__conversations">
                        <ul className="chat__left list">
                            {conversations.map((_conversation, index) => (
                                <li key={index} className="list__item">
                                    <button className="list__link"
                                            onClick={() => setCurrentConversation(_conversation)}>
                                        {getRecipient(_conversation).name}
                                    </button>
                                </li>
                            ))}
                        </ul>
                    </div>
                )}
                {
                    conversation && !!messages.length && (
                        <div className="chat__right">
                            <Messages messages={messages} isOwnMessage={isOwnMessage} hasMore={hasMore}
                                      getMessages={getMessages}/>
                            <form className="form" onSubmit={sendMessage}>
                                <input className="form__input message__input"
                                       placeholder="Tryk Enter for at sende en besked"
                                       value={message}
                                       onChange={e => setMessage(e.target.value)}/>
                            </form>
                        </div>
                    )
                }


            </article>
        </div>
    )

消息组件

    return (
        <ScrollToBottom className="chat__messages">
            <button className="btn"
                    disabled={!hasMore}
                    onClick={() => getMessages()}>{hasMore ? 'Hent flere beskeder' : 'Ikke flere beskeder'}</button>
            {messages.map((_message, index) => (
                <div key={index}>
                    {isOwnMessage(_message) ? (
                        <div className="message">
                            <div className="message__user">
                                <p className="message__user-name">{_message.user.name}</p>
                                <p className="message__user-date">{moment(_message.createdAt).fromNow()}</p>
                            </div>
                            <span className="message__text">{_message.text}</span>
                        </div>
                    ) : (
                        <div className="message">
                            <span className="message__text">{_message.text}</span>
                            <div className="message__user">
                                <p className="message__user-name">{_message.user.name}</p>
                                <p className="message__user-date">{moment(_message.createdAt).fromNow()}</p>
                            </div>
                        </div>
                    )}
                </div>
            ))}
        </ScrollToBottom>

    )

Answer 1

听起来您想使用 scrollTo方法。