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

本文主要是介绍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的解决方案(最全)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！