聊天页面滚动应该从 reactjs 的末尾开始答案

【问题标题】：Chat page scroll should start from the end in reactjs聊天页面滚动应该从 reactjs 的末尾开始
【发布时间】：2022-11-17 02:28:18
【问题描述】：

我已经在 react js 中实现了聊天，当打开对话时，弹出滚动条会向下滚动，这是磨损的。默认情况下，滚动应该与 facebook、slack 等相同。

这是我的实现。聊天消息来自服务器，这里我给出的是静态消息。目前的工作是这样的。 https://gyazo.com/cac3862795f22ec08dc4448c6ebd7e39 它不应该滚动，而是直接从末尾开始，就像 slack 和 facebook 一样。

const messages = [
  {message: 'message1'},
  {message: 'message2'},
  {message: 'message3'},
  {message: 'message4'},
  {message: 'message5'},
  {message: 'message6'},
  {message: 'message7'},
  {message: 'message8'},
  {message: 'message9'},
  {message: 'message10'},
  {message: 'message11'},
  {message: 'message12'},
  {message: 'message13'},
  {message: 'message14'},
  {message: 'message15'},
  {message: 'message16'},
  {message: 'message17'},
  {message: 'message18'},
];


const scrollToEnd = () => {
    if (refForScrollingToLastElement.current) {
      refForScrollingToLastElement.current.scrollIntoView({
        behavior: 'smooth',
      });

// Also tried this but same befaviour

/*const divHeight = refForScrollingToLastElement.current.offsetHeight;
      window.scrollBy(0, divHeight);

    }*/
  };


useEffect(() => {
scrollToEnd()
},[])


retun(
    <>
    <div>
messages.map(item => <p>{item.message}</p>)
</div>
<div
      ref={refForScrollingToLastElement}
      style={{
        height: 1,
        width: 100,
      }}
    ></div>
</>

我已经尝试在对话弹出窗口中打开滚动到页面底部以查看那里的最新消息。

我希望学校应该在最后默认开始，但滚动行为不应该像 facebook、slack 等那样显示。

【问题讨论】：

标签： reactjs

【解决方案1】：

您应该使用 behavior: 'auto' 来避免滚动行为。 Read More at MDN

【讨论】：