聊天应用程序需要滚动到底部 React/jQuery，无法正常工作答案

【问题标题】：Chat application needs to scroll to bottom React/jQuery, not working聊天应用程序需要滚动到底部 React/jQuery，无法正常工作
【发布时间】：2020-11-17 08:08:46
【问题描述】：

我正在努力确保 Segment 滚动到底部。我在 Stack Overflow 上阅读了很多关于我们如何在 CSS 中使用 scrollTop 属性以及在 jQuery 中使用 scrollTop() 函数的信息。我在这里复制了我能找到的相关代码：

请注意：我正在使用 React 和 Semantic UI，如果这会有所不同的话。另外，我刚刚通过 npm 安装了 jQuery，尝试使用我在网上找到的解决方案。

这是我的分区：

<Segment  id="myDivID" style={{minHeight:"450px",maxHeight:"450px", "overflow-y":"auto", "scrollTop":"450px"}} >
    // all of the individual chat messages                                       
</Segment>

除了上面传递的样式中的scrollTop 属性之外，这是我尝试使用的样式。

useEffect(()=>{
            var element = document.getElementById("myDivID");
            if(element){
                    window.scrollTo(0,element.offsetHeight);

            }
    },[])
    $('#myDivID').scrollTop($('#myDivID').scrollHeight);

【问题讨论】：

我确定有一个反应组件可以帮助解决这个问题
这能回答你的问题吗？ jQuery Scroll to bottom of page/iframe

标签： jquery css reactjs

【解决方案1】：

您必须定义参考。

const messageRef = useRef();

对于这个定义的 ref，你应该把它给你的 message div

<Segment  id="myDivID" style={{minHeight:"450px",maxHeight:"450px", "overflow-y":"auto", "scrollTop":"450px"}} >
   <div ref={messageRef}>
      // all of the individual chat messages
   </div>                                     
</Segment>

最后，

useEffect(() => {
    if (messageRef.current) {
      messageRef.current.scrollIntoView(
        {
          behavior: 'smooth',
          block: 'end',
          inline: 'nearest'
        })
    }
  })

【讨论】：