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

Question

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

注意：如果有区别的话，我会使用React和Semantic UI React。此外，我刚刚通过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);

Answer 1

您必须定义参考

const messageRef = useRef();

对于这个定义的ref，您应该将其提供给您的消息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'
})
}
})