Question

背景

我正在使用React应用程序中的一个聊天应用程序，其中我有一个使用li元素显示消息的ul元素。在某些时候，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

将其扔到启动函数中应将列表滚动到init的底部。 scrollTop开始时为0，应在初始时设置为最大值scrollHeight。

希望这会有所帮助

有没有一种方法可以显示ul元素的上一个li元素（溢出其父元素）？

1 个答案: