zoukankan      html  css  js  c++  java
  • 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%;
    }
    
    

    如有不足欢迎指正

    已知越多,未知越多。
  • 相关阅读:
    关于拷贝构造函数和赋值运算符
    笔试题(转)
    Pro *C/C++学习笔记(一)
    __cdecl
    Visual Studio 2010中C++的四大变化(转)
    小小递归函数的执行过程
    stl string常用函数
    【C/C++ string】之strcpy函数
    409 Excuses, Excuses!
    10878 Decode the tape
  • 原文地址:https://www.cnblogs.com/why98/p/15168711.html
Copyright © 2011-2022 走看看