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

2021/8/21 6:06:33

本文主要是介绍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%;
}

如有不足欢迎指正



这篇关于scrollTop设置后一直为0的解决方案(最全)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程