scrollTop设置后一直为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%;
}

如有不足欢迎指正

posted @ 2021-08-21 01:42  十年饮冰,难凉热血  阅读(3357)  评论(0编辑  收藏  举报