有没有办法显示溢出其父元素的 ul 元素的最后一个 li 元素？

Question

Background

I'm working on a chat app in react where I have a ul element that displays messages using li elements. At some point the ul element overflows its parent element.

Problem

Now, the problem is when I switch chats. Is there a way I can make the ul element display the li elements that have overflowed, that is, display the last li elements of the ul element instead of displaying from the first li elements and have the user scroll to the bottom because that would make for a terrible user experience.

I tried using the scrollIntoView() method to make the ul element scroll to the last message whenever a new li element is added and this works fine while the user is in a chat but once the user switches chats, the new chat's ul element visibly scrolls to the last element in it. I would like to display the elements from the bottom without the ul element scrolling at all.

Code Sample

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

I think this might be what you're looking for scrollTop : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Explicitly setting scrollTop of an element will scroll it instantly to the value you specify.

You would use this in conjunction with scrollHeight : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

scrollHeight is the total amount the element can scroll, including the invisible bits that are overflowed.

So an example would be:

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

throwing this in your start function should scroll the list to the bottom on init. scrollTop is 0 at the start and should be set to the max scrollHeight on init.

Hope this helps