React监听滚动条事件——页面跳转后返回当前滚动条位置

实现一个需求,当页面跳转到另一个页面时,使用react-router跳转回原页面,滚动条需要停留在原有位置。滚动条所在元素是antd中layout部分,ref半天取不到dom元素,索性直接用id取得dom元素。

let defaultScrollTop = 0;

componentDidMount() {
// 组件挂载时将defaultScrollTop赋值滚动条的scrollTop
    let latoutNode = document.getElementById("latoutRef");
    if (latoutNode) {
      latoutNode.addEventListener("scroll", e => {
        latoutNode.scrollTop = e.target.scrollTop;
      });
      latoutNode.scrollTop = defaultScrollTop;
    }
  }

  componentWillUnmount() {
  // 组件卸载时移除监听事件,同时拿到defaultScrollTop 
    let latoutNode = document.getElementById("latoutRef");
    if (latoutNode) {
      latoutNode.removeEventListener("scroll", e => {
        latoutNode.scrollTop = e.target.scrollTop;
      });
      defaultScrollTop = latoutNode.scrollTop;
    }
  }

你可能感兴趣的:(React监听滚动条事件——页面跳转后返回当前滚动条位置)