首页 > 其他 > 详细

scrollTop设置后一直为0的解决方案(最全)

时间:2021-08-21 10:25:42      阅读:22      评论:0      收藏:0      [点我收藏+]

近期在业务中要实现keep-alive记住滚动条位置,发现scrollTop一直为0,排除各个组件的问题后仍未找到解决办法,最后考虑到是css的问题。

mounted() {
    //一开始使用的@scroll绑定在container上没有触发,后来发现使用这种方法有效
    window.addEventListener(‘scroll‘, this.scroll, true)
},
methods: {
    //封装的兼容性方法
    scroll() {
      //获得页面向左、向上卷动的距离
      function getScroll() {
        return {
          left:
            window.pageXOffset ||
            document.documentElement.scrollLeft ||
            document.body.scrollLeft ||
            0,
          top:
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop ||
            0
        };
      }
      //这里的this.$nextTick一定要有
      this.$nextTick(() => {
        //这里是外层container
        const container = this.$el.querySelector(‘.container‘)
        if (container) {
          //正常获取scrollTop
          console.log(this.$el.querySelector(‘.container‘).scrollTop);
        }
      })
    }
}
.container {
  /* 这两个是必须要有的,不要写成overflow-y:auto; */
  overflow-y: scroll;
  height: 100%;
}

如有不足欢迎指正

scrollTop设置后一直为0的解决方案(最全)

原文:https://www.cnblogs.com/why98/p/15168711.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!