通过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元素
