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%;
    }
    
    

    如有不足欢迎指正

    已知越多,未知越多。
  • 相关阅读:
    各进制转换
    免root xshell连接termux
    sqlmap怎么拿shell
    SSRF漏洞
    国外安全网站、社区论坛、博客、公司、在线工具等整合收集
    渗透测试常用工具问题总结
    cdn绕过
    xss注入
    永恒之蓝(msf17010)kali复现
    文件上传漏洞和绕过
  • 原文地址:https://www.cnblogs.com/why98/p/15168711.html
Copyright © 2011-2022 走看看