scrollTop踩坑

scrollTop踩坑

业务场景

通过webUSB 连接开发板，开启Serial串口进行通讯。
因为开发板在串口开启后会一只像web端传输数据，我们拿到这个数据之后，要返回到用户界面，类似于实现terminal之类的页面返回给用户。

目的

每条数据到达web端，就反馈到用户界面。数据超过了一定数量之后，显示数据到区域应该会进行实时滚动。
我这里打算用到是js 中的scroll去实现，每次一条数据到达web端的时候，控制对应的div scrollTop = scrollTop + 21 ,其中21是一行数据的固定高度。
但是尽管设置了overflow为auto，且控制了高度。但是包裹到div并没有实现
我的代码如下：

<div className={
     styles.messageList} id={
     'messageList'}>
     <div id={
     'messageContent'}>
       {
     
         this.state.serialMessage.map((item, index) => {
     
           return <p key={
     index}><span className={
     styles.orderSpan}>{
     index + 1}:</span>{
     item}</p>
         })
       }
     </div>
</div>

处理函数如下：

  /**
   * 接受micro:bit 发送的 serial串口信息
   */
  receiveSerialMessage = (res) => {
     
    let message = [].concat(this.state.serialMessage)
    message.push(res.detail.message)
    this.setState({
      serialMessage: message })
    let messageContent = document.getElementById('messageContent')
    let messageListHeight = messageList.getBoundingClientRect().height
    console.log('scrollTop', messageContent.scrollTop, 'messageListHeight', messageListHeight)
    if (messageListHeight > 300) {
     
      messageContent.scrollTop = messageContent.scrollTop + 21
    }
  }

我的思路是，获取messageList的高度，当他的高度超过300时，说明消息队列显示高度超过了限制，所以通过改变scrollTop +21让区域进行滚动。

• 但是console输出但数据scrollTop 始终为0，没有被修改。

摘自MDN：
scrollTop 可以被设置为任何整数值，同时注意：

• 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。
• 设置scrollTop的值小于0，scrollTop 被设为0
• 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。

虽然对我的问题帮助不大，但是还是提一下。
最后我尝试了一下，发现问题的原因是

• 我的样式 overflow:auto; height:300px;是给最外面的id= ‘messageList’ 设置的，但是滚动的确实他的子元素 messageContent，这样设置是不合理的。

我的最后代码如下：

 /**
   * 接受micro:bit 发送的 serial串口信息
   */
  receiveSerialMessage = (res) => {
     
    let message = [].concat(this.state.serialMessage)
    message.push(res.detail.message)
    this.setState({
      serialMessage: message })
    let messageList = document.getElementById('messageList')
    let messageContent = document.getElementById('messageContent')
    let messageListHeight = messageContent.getBoundingClientRect().height
    if (messageListHeight > 300) {
     
      messageList.scrollTop = messageList.scrollTop + 21
    }
  }

其中样式不做修改，overflow:auto; height:300px; 依旧设置给最外面的messageList元素

---

• 想要谁滚动，就给谁设置overflow:auto; height:300px;
  然后去控制他的scrollTop就可以生效