即时聊天软件发消息界面，scrollTo不生效

Li Guangyao

已于 2022-11-20 21:27:02 修改

阅读量598

点赞数 1

分类专栏：前端文章标签： react.js javascript 前端

于 2022-11-20 21:23:55 首次发布

本文链接：https://blog.csdn.net/weixin_42371427/article/details/127954204

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近做了个web即时聊天软件，模仿微信的那种，用的是react。

在聊天界面，消息显示我用的是一个数组，里面保存的一条一条消息对象。
每当有新消息发出或者接收的时候，就往数组最后插入，然后在setUseState更新。但是默认情况下有问题，就是消息列表不能自动滚动到最低端，导致画面一直停留在旧消息中。

看到有很多人使用了element.scrollTo=element.scrollHeight这个方法，但是我怎么使用都不生效最后使用scrollIntoView函数解决，这个函数的意思是让某个html元素滚动到能看见的区域。
思路是在插入一个消息之后，就找到这个消息元素，并使用scrollIntoView()方法。注意如果此时消息列表是空的的情况，所以我增加了判断，在多于2条消息的时候才需要滚动。

加了一个settimeout，是因为usestate更新是异步的，所以有可能消息还没插进去，就执行了滚动。

代码如下：

setTimeout(() => {
      let parentElement = document.getElementById( "dialogue-scroll" ) as TMLElement;
      let length = parentElement.children.length 
      if ( length > 2) {
        parentElement.children[length - 1].scrollIntoView(true);
      }
    }, 100);

<div id="dialogue-scroll">
      {messageList.map((item, index) => (<div id="message-item">)}
</div>

参考1 参考2