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;
    }
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,015评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,082评论 2 59
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,026评论 3 119
  • 偶尔是会想起你 我们之间熟悉又陌生的距离, 渐渐疏远了彼此, 藕断丝连的友谊, 却在寒风刺骨的冬天得到了期许。 陌...
    古钟阅读 420评论 0 0
  • 妈妈在厨房做饭,儿子在客厅玩积木,爸爸躺着玩手机。 儿子说:“妈妈我渴了!” 妈妈炒着菜说:“让爸爸给你倒!” 爸...
    林仲阅读 754评论 4 7