Есть ли способ отобразить последний элемент li элемента ul, который переполняет его родителя?

Question

Фон

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

Проблема

Теперь проблема в том, когда я переключаю чаты. Есть ли способ заставить элемент ul отображать переполненные элементы li, то есть отображать последние элементы li элемента ul вместо отображения из первых элементов li, а пользователь прокручивать вниз, потому что это для ужасного взаимодействия с пользователем.

Я пытался использовать метод scrollIntoView (), чтобы элемент ul прокручивался до последнего сообщения при каждом добавлении нового элемента li, и это прекрасно работает, когда пользователь находится в чате, но один раз. пользователь переключает чаты, элемент ul нового чата заметно прокручивается до последнего элемента в нем. Я хотел бы отображать элементы снизу без прокрутки элемента ul вообще.

Пример кода

const MessagingScreen = ({ openChat }) => {
  const messagesEnd = useRef();
  const [message, setMessage] = useState("");

  const scrollToBottom = () => {
    if (openChat.messages.length > 0) {
      messagesEnd.current.scrollIntoView({ behaivor: "smooth", block: "start" });
    }
  }

  useEffect(() => {
    scrollToBottom();
  }, [openChat.messages])

  return (
    <main className="flex flex-column flex-grow mh-50">
        <ul className="chat-msgs flex-grow w-100 h-100 bg-white overflow-y-scroll instant">
          {openChat.messages.map(chatMessageDetails =>
            <ChatMessageItem {...chatMessageDetails} key={chatMessageDetails.message}/>)
          }
          <div ref={messagesEnd}/>
        </ul>
     </main>
  )
 }

Answer 1

Я думаю, это может быть то, что вы ищете scrollTop: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Явная установка scrollTop элемента мгновенно прокрутит его до указанного вами значения .

Вы можете использовать это вместе с scrollHeight: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

scrollHeight - это общая сумма, которую элемент может прокрутить, включая невидимые биты, которые переполнены.

Примером может быть:

var myListElement = document.getElementById('myList');
myListElement.scrollTop = myListElement.scrollHeight

. Если вы выберете это в вашей функции запуска, прокрутите список до дна в init. scrollTop равен 0 в начале и должен быть установлен на максимум scrollHeight при инициализации.

Надеюсь, это поможет