精华内容
下载资源
问答
  • vue获取滚动的scrollTop的值

    万次阅读 2019-08-19 16:39:19
    mounted() { // let _this=this window.addEventListener('scroll', () => { let top = document.documentElement.scrollTop || do...
     mounted() {
             
               
                    // let _this=this
                    window.addEventListener('scroll', () => {
                        let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
                        console.log(top);
                        if (top > 700) {
                            this.scrollTag = true;
                        } else {
                            this.scrollTag = false
                        }
    
                    })
    
            }
    

    在这里插入图片描述

    展开全文
  • Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD,即指定...
  • vue中的scrollTop获取

    千次阅读 2019-01-05 12:37:35
    在项目中,有一个需求是,下拉一段距离后,头部的背景有相应渐变。 那就来监听scroll事件就好了。 mounted(){ let _this=this ... let top = document.documentElement.scrollTop || document.body.scr...

    在项目中,有一个需求是,下拉一段距离后,头部的背景有相应渐变。
    那就来监听scroll事件就好了。

    mounted(){
        let _this=this
        window.addEventListener('scroll',function(){
          let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset//要做兼容 在模拟器能正常获取scrolltop在微信h5页面和手机的浏览器页面一直为0
            if(top==0 || top<0){
               _this.scrollTag=false;
            }else{
               _this.scrollTag=true
            }
    
          })
      }
    
    

    还有一些网上说法是,与你的doctype声明有关就是当

    页面指定了DTD,使用document.documentElement。
    页面没有DTD,使用document.body
    尝试无果,还是用上述的兼容写法有效

    展开全文
  • vuescrollTop取值无效问题

    千次阅读 2018-09-28 09:30:10
    最近在写Vue中的微信公众号程序遇到个问题,div获取scrollTop始终是0 网上查询了下,大家发的都是兼容性的问题的处理......,关于DTD兼容的,这里我都试过,发现并没有用,到底问题是出现在哪里呢?后面发现dom元素...

    最近在写Vue中的微信公众号程序遇到个问题,div获取scrollTop始终是0

    网上查询了下,大家发的都是兼容性的问题的处理......,关于DTD兼容的,这里我都试过,发现并没有用,到底问题是出现在哪里呢?后面发现dom元素选错了 ,,我有个goodList组件  在index页面的index-content盒子中渲染,先前我一直取用goodList组件的scrollTop,所以一直是零。后面查询解释是

    scrollTop 值是这个元素的顶部到它的最顶部可见内容(的顶部)的距离的度量,当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。

    查询mdn的解释是上诉内容,关键在于“当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0”。如果一个scrollTop要有值,他含有的内容必须要产生滚动。

    只能怪自己没掌握好,遇到这个坑。前提是排除DTD文档模式的影响。即说加了!DOCTYPE的html文档。这里在说下DTD影响解决方案:

    let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
    

     

    展开全文
  • 之前在项目中使用vue-cli scrollTop开发过网站右侧楼层导航效果折腾小记,现在测试说有一个bug,那会就是有些页面一直报错 index.vue:47 Uncaught TypeError: Cannot read property 'top' of undefined at Vue...

    前沿


    之前在项目中使用vue-cli scrollTop开发过网站右侧楼层导航效果折腾小记,现在测试说有一个bug,那会就是有些页面一直报错

    index.vue:47 Uncaught TypeError: Cannot read property 'top' of undefined
        at VueComponent.myScroll (index.vue:47)
    

    经过筛查发现是scroll报的错,发现即使在某些页面为没有使用组件,也会抱着个错,于是就开始研究,发现
    window.addEventListener("scroll", this.myScroll);是基于windos对象的,所以在整个项目都会监听,最后想到vue的一个生命周期destroyed,

    • 那就是在组件销毁时也取消removeEventListener监听,这样就好了。

    解决方案

    需要在网站右侧楼层导航效果折腾小记这个组件中加入,同时我也更新了这个组件,直接使用就好了。

      destroyed() {
        window.removeEventListener("scroll", this.myScroll);
      },
    

    结束语

    多多折腾,多多学习。有什么不对的地方,评论区评论。大家一块进步。

    展开全文
  • 我的项目中使用了vue和 vant 其中封装的组件有点多,先要的效果就是 缓存list数据并且下拉数据时候 当 点击item项目时候 按回退时候 滚轮还是在原来位置 其中 数据缓存不在这里说了使用的是 上代码 这是封装的组件...
  • 今天遇到一个小问题vue设置滚动条高度一直为0。解决方法放在下边。 在这里一定要加上this.$nextTick()方法,否则document.querySelector(“.article”).scrollTop的值永远为0,不会赋值成功的 methods: { gundong()...
  • vue项目中往往有这样一个需求,在初始化时需要给某个容器的scrollTop设置一个值,一开始的想法是在created或者mounted中改变 scrollTop 的值,但是却出现了几个问题。 问题1:使用在created或者mounted中使用this....
  • 最近在用vue写聊天小功能的时候,用到element-ui隐藏组件el-scrollbar 在写对话窗无限滚动的时候遇到无法滚动到底的问题 解决了很久才解决。 现在记录总结在这里 网上大多给的解决方案是 按照是否设置页面DTD let ...
  • 最近在vuex项目中碰到了这个问题,监听页面滚动时 document.body.scrollTop一直都是0,捣鼓了好久最后找到了几个解决方法 方法一:浏览器兼容有问题 写个兼容方法就行 // chrome || firefox || IE: // document....
  • VuescrollTop赋值一直为0

    千次阅读 2020-07-08 09:03:20
    Vue项目中,给scrollTop赋值一直0,解决方案总结如下: mounted中:window设置scroll滚动事件 window.addEventListener('scroll', () => { this.scrollGroupSetting() }, false) destroyed中:移除scroll...
  • 今天写一个功能要用到滚动条高度 试了好多网上的方法获取到都是0 话不多说上代码!!!!!!! 代码如下: 效果图如下: 简单记录一下
  • //寻找父元素的ref (组件形式) this.$parent.$refs.xxx.scrollTo({ top: height,//滚动高度 behavior: 'smooth' // 平滑滚动 }) 首先下载插件 npm install smoothscroll-polyfill --save ...
  • 解决VUE中document.body.scrollTop为0

    万次阅读 2018-01-13 00:37:18
    Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD,即...
  • vue ref scrollTop不起作用

    万次阅读 2017-11-03 15:14:17
    当我们在vue中使用ref,来多列控制设置scrollTop或者scrollTo时,若无效,不妨试试  this.$nextTick(() => { this.$refs.viewBox[key].scrollTo(0, 34 * index); }) 多数原因是加在顺序问题导致设置无效
  • vue 中监听并设置scrollTop 问题描述: 目前在做一个项目,父子组件以及兄弟组件中数据调用比较频繁。但是鉴于项目没那么大,就没有使用vuex。直接使用了this.$emit来给父级组件传递参数以及触发事件. 但是,由于...
  • 技术栈: vue+vux+nodejs 需求:对汽车品牌列表可以按照字母进行索引定位 在开发中实现这种需求,心想还不是小菜一碟,作为一个饱经bug的程序员,别的我就不吹了,最起码Ctrl+C用的还是蛮不错的。 虽然我的复制...
  • vue项目 设置scrollTop不起作用 总结

    万次阅读 2018-06-22 20:03:19
    vue项目 设置scrollTop不起作用 总结 今天在开发中,遇到这样一个情景。一个页面中有三个模块,每个模块对应一个标题,每个模块内容都很长,所以需要点击当前模块对应的标题滚动到模块所在位置。 我想的方案是获取...
  • Vue获取页面元素的相对位置

    千次阅读 2021-02-11 15:04:43
    今天在开发源码栏目,发现有一处需要获取元素的相对位置高度,发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用...
  • vue 利用scrollTop 配合 setinterval实现滚动动画过渡时,滚动动画第一次 二次 滚动的数据正常 滚动方向也正常,第三次就开始往上滚然后再往下滚 一直循环了。。。。。。救救孩子吧/(ㄒoㄒ)/~~跪谢各位前辈了 !...
  • 官方文档,在APP.vue中设置,如下: <template> <div id="app"> <keep-alive> <router-view/> </keep-alive> </div> </template> 2...
  • 通过$refs去获取被注册元素或组件实例/示例:this.$refs.绑定属性.元素属性方法 !使用注意: ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你...
  • vue获取子组件高度

    千次阅读 2020-01-09 16:57:01
    vue获取子组件高度 this.loopHeight = this.$refs["vueHeader"].$refs["getHeader"].offsetHeight 同理也可以获得子组件的数据和方法。 需求描述 就是官网的一个二级页内(锚点)导航,位置在轮播图下方。 ...
  • let scrollTop = document.documentElement.scrollTop || //firefox document.body.scrollTop || //chrome window.pageYOffset //safari 打印出来的结果都是0,原因我还没有找到,但是需求还是要实现的 然后开始...
  • 今天在开发源码一处发现有一处需要获取元素的相对位置高度,发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用Javascript...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,639
精华内容 1,855
关键字:

vue获取scrolltop

vue 订阅