在reactjs中，聊天页面滚动应该从末尾开始

Question

我已经在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等那样显示学生行为。

Answer 1

您应该使用behavior: 'auto'来避免滚动行为。在MDN阅读更多内容