如何设置ReactDOM节点的scrollTop属性？

Posted 2021-05-04

设置React节点的scrollTop属性不起作用。

我正在尝试使用列表导航到页面和从页面导航时恢复列表的滚动位置。

目前我的代码如下：

  componentDidMount() {
    let prevScrollHeight = Number(localStorage.getItem('listHeight'));

    if (prevScrollHeight >= 0) {
      let listNode = ReactDOM.findDOMNode(this.refs.speakersList);
      listNode.scrollTop = prevScrollHeight;
    }
  }

滚动高度已成功存储在本地存储中。什么不起作用：listNode.scrollTop = prevScrollHeight

有谁知道如何设置React节点的滚动位置？

答案

想出了问题......如果您遇到同样的问题，以便将来参考 - 解决方案是将设置scrolltop的功能放在setTimeout中。似乎它与javascript事件循环有关，而setTimeout将函数放在队列的后面。

工作代码：

componentDidMount() {
  setTimeout(this.setScrollTop.bind(this))
}

setScrollTop() {
  let prevScrollHeight = Number(localStorage.getItem('listHeight'));

  if (prevScrollHeight >= 0) {
    let listNode = ReactDOM.findDOMNode(this.refs.speakersList);
    listNode.scrollTop = prevScrollHeight;
  }
}