Как добавить скролл элементу React?

Question

[Артур Галяев]

Делаю компонент чата и хочу чтобы он сразу "скроллил" вниз к последним сообщениям. Пытался сделать это с помощью рефом, не помогло. Всё дело в том что элемент показывается с задержкой(из-за запросов к серверу) и реф перестаёт работать. Что делать?

const Chat = () => {
    const dispatch = useDispatch()
    const chatRef = useRef()
    const chat = useSelector(state => state.chat);
    const loading = useSelector(state => state.main.loading);
    useEffect(() => {
        dispatch(getChat())
    }, [])
    useEffect(() => {
        if(!loading && chat.messages) chatRef.current.scrollTo(0, 100)
    }, [chat])
	return (
		<div>
{loading ? 'loading':
        <div className="mt-3">
                <div>
                    <div ref={chatRef} style={{height: '65vh', overflow:'auto'}} >
                        {chat.messages.map(item => 
                                <p>{item.username}: {item.text}</p>
                        )}
                    </div>
                </div>
        </div>
            }
</div>
	)
}	

export default Chat;

Comments

[Timur Kostenko]

Попробуй в зависимости добавь loading, сhatRef

useEffect(() => {
  if(!loading && chat.messages) chatRef.current.scrollTo(0, 100)
}, [chat, loading, chatRef])

Answer 1

[sakhnyuk]

Добавь в зависимости эффекта loading и опускайся вниз на высоту скрола.
Убедить, что chat.messages бывает falsy (если это пустой массив, то проверяй как chat.messages.length).

useEffect(() => {
        if (!loading && chat.messages && chat.messages.length) {
            chatRef.current.scrollTop = chatRef.current.scrollHeight
        };
    }, [chat, loading])