Всем привет, есть блок чата внутри которого сообщения. У него

Question

Всем привет, есть блок чата внутри которого сообщения. У него

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

#frontend #javascript #programming #react.js #russian

0

28.02.2022

19 ответов

25 просмотров

Sm•ok 👾

https://developer.mozilla.org/ru/docs/Web/API/Element/scrollIntoView

0

28.02.2022

Egor Платонов Автор вопроса

Sm•ok 👾
https://developer.mozilla.org/ru/docs/Web/API/Elem...

Спасибо, посмотрю

0

28.02.2022

Ivan Minin

useEffect(() => { messagesRef.current?.scrollIntoView({ // smooth - плавно behavior: 'auto', }); }, [messages]); ... <span ref={messagesRef}></span>

0

28.02.2022

Egor Платонов Автор вопроса

Ivan Minin
useEffect(() => { messagesRef....

Не помогло, почему-то.

0

28.02.2022

Ivan Minin

Так работать не будет. Поверь реф не на блок сообщений, а на спан внутри блока

0

28.02.2022

Egor Платонов Автор вопроса

Сделал якорь в самом низу блока, но так-же не сработало. Прокрутку делаю при первом рендеринге компонента.

0

28.02.2022

Ivan Minin

Egor Платонов
Сделал якорь в самом низу блока, но так-же не сраб...

А так стоп. Почему у тебя в зависимости эффекта реф находится? Там должен быть массив сообщений

0

28.02.2022

Egor Платонов Автор вопроса

Ivan Minin
А так стоп. Почему у тебя в зависимости эффекта ре...

Не-не, щас там пустой массив, мне надо прокрутить только при первом рендеринге.

0

28.02.2022

Egor Платонов Автор вопроса

Egor Платонов
Не-не, щас там пустой массив, мне надо прокрутить ...

Пустой массив зависимостей я имею ввиду.

0

28.02.2022

Ivan Minin

Egor Платонов
Не-не, щас там пустой массив, мне надо прокрутить ...

Только при первом? Ну тогда оставить пустым, как сделал. Так не работает?

0

28.02.2022

Egor Платонов Автор вопроса

Ivan Minin
Только при первом? Ну тогда оставить пустым, как с...

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

0

28.02.2022

Ivan Minin

Egor Платонов
Не работает, почему то внешний скролл только сраба...

У блока сообщений задана высота?

0

28.02.2022

Egor Платонов Автор вопроса

Ivan Minin
У блока сообщений задана высота?

Да, max-height задана

0

28.02.2022

Ivan Minin

Egor Платонов
Да, max-height задана

Честно, даже не знаю.. Как я предлагал должно работать, попробуй поиграть с разными вещами: задать временно жёстко высоту, например, и тд. Это 100% рабочий вариант, что-то где-то мешает

0

28.02.2022

Ivan Minin

Нет, это не должно никак мешать. Ты же привязываешься к рефу внутри контейнера

0

28.02.2022

Egor Платонов Автор вопроса

Ivan Minin
Нет, это не должно никак мешать. Ты же привязываеш...

Ладно бы вообще скрол не срабатывал, но почему то внешний докручивается до низа. Буду пробовать - спасибо за совет.

0

28.02.2022

Ivan Minin

Egor Платонов
Ладно бы вообще скрол не срабатывал, но почему то ...

Да, мне тоже непонятно это. Если решишь, скажи, интересно. Я тоже подумаю

0

28.02.2022

Egor Платонов Автор вопроса

Ivan Minin
Да, мне тоже непонятно это. Если решишь, скажи, ин...

Попробовал убрать зависимости в useEffect и теперь докручивает, но понятно что так делать не надо, поэтому даже не знаю.

0

28.02.2022

Ivan Minin · Accepted Answer

Ivan Minin

Создай невидимый спан внизу блока с сообщениями и повесь на него реф. Сделай юзэффект, в котором будешь делать скролл вниз при обновлении массива сообщений

0

28.02.2022

169 похожих чатов

Всем привет, есть блок чата внутри которого сообщения. У него

19 ответов

Похожие вопросы