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

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

作者: 芒果加奶 | 来源:发表于2018-11-13 17:53 被阅读0次

    实现一个需求,当页面跳转到另一个页面时,使用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监听滚动条事件——页面跳转后返回当前滚动条位置

          本文链接:https://www.haomeiwen.com/subject/lkvlfqtx.html