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

Question

背景

我正在开发一个聊天应用程序，其中我有一个 ul 元素，它使用 li 元素显示消息。 在某些时候，ul 元素会溢出其父元素。

问题

现在，问题是当我切换聊天时。有没有办法让 ul 元素显示溢出的 li 元素，也就是说，显示 ul 元素的最后一个 li 元素，而不是从第一个 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

在你的启动函数中抛出这个应该会在初始化时将列表滚动到底部。 scrollTop 在开始时为 0，应在初始化时设置为最大值 scrollHeight。

希望对你有帮助