JavaScript 滚动到指定元素

需求

在ChatBot聊天对话框中，当有新消息时，聊天记录列表滚动到最后。

方案

在聊天记录列表元素的最后加一个div，每次有新消息，都使用div元素的scrollIntoView。

React 代码

const Chat = () => {
    const bubbleListBottom = React.useRef<HTMLDivElement>(null);
    const [messages, setMessages] = React.useState<Message[]>([])
    
    React.useEffect(() => {
        bubbleListBottom.current?.scrollIntoView({behavior: 'smooth'});
    }, [messages]);
    
    return (
                {
                    messages.map((message: Message, index: number) => {
                            return <div key={index}>
                                <Bubble/>
                            </div>
                        }
                    )
                }
                <div ref={bubbleListBottom}></div>
    )
}

export default Chat;