Блог

Я создаю приложение для чата, и, поскольку такого рода приложения работают каждый раз, когда вы отправляете новое сообщение, представление должно прокручиваться вниз и показывать новое сообщение.

Вопрос в том, что при первом отображении компонента он прокручивается вниз, но когда я нажимаю, чтобы отправить новое сообщение, этого не происходит. Добавляется новое сообщение, но оно не прокручивается. Чего я на самом деле не понимаю, так это того, что в Firefox это работает так, как ожидалось, но не в Chrome.

Messenger.jsx

 const [messages, setMessages] = useState([]); const scrollRef = useRef();   .... const handleSubmit = async () =gt; {  const data = {  conversationId: currentChat._id,  sender: user._id,  text: input,  };   const response = await newMessage(data);  setMessages([...messages, response]);  setInput('');  setIsDisabled(true);  };   useEffect(() =gt; {  scrollRef.current?.scrollIntoView({ behavior: 'smooth' });  }, [messages]);   ...  lt;div className='chat-box__top'gt;  {messages.length gt; 0 amp;amp;  messages.map((message) =gt; (  lt;div ref={scrollRef} key={message._id}gt;  lt;Message className='message' own={message.sender._id=== user._id} message={message} /gt;  lt;/divgt;  ))} lt;/divgt;   ....  lt;button className='chat-box__submit' onClick={handleSubmit} disabled={isDisabled}gt;  lt;SendIcon className='icon' /gt; ---.lt;/buttongt;  

CSS мессенджера

 .chat-box__top{  padding-right: 10px;  overflow-y: auto; }