vue监听滚动条window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop一直为0

最新推荐文章于 2021-12-27 09:25:20 发布
最新推荐文章于 2021-12-27 09:25:20 发布
阅读量5.5k 收藏 12
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40419454/article/details/93503767
版权

今天碰到一个坑

监听滚动条window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop一直为0

百度了两个多小时都不能解决

问了公司的大佬才发现原来页面中的一个div定义了overflow-y:auto，而页面滚动一直滚动的时这个div window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop当然一直为0，将overflow-y:auto去掉或改为overflow-y:visible，解决

qq_40419454
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DOCTYPE时，使用document.body。 IE和Firefox都是如此。 以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，
关于window.pageYOffset和document.documentElement.scrollTop
09-05
window.pageYOffset：Netscape属性，指的是滚动条顶部到网页顶部的距离
解决window.pageYOffset打印的值为0
sinat_38628334的博客
05-29 2313
最开始没有考虑完全的时候是这样写的： 控制台打印的值始终为0，但是打印的window属性里又有确定的值，经过百度后发现原因是这句代码在页面没有完全加载完全的时候就执行了，下面的写法就可以了： 看来还是自己基础不扎实，以后还是要多夯实基础才行啊 ...
scroll和offset案例
zuo_zuo_blog的博客
01-09 189
1.固定导航栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } im...
利用JS实现粘性定位
lbwnbdedede的博客
10-31 1701
文章目录前言一、CSS布局二、JS实现1.获取元素2.获取参数3.事件总结 前言 效果如下图（橙色小方块） 一、CSS布局 CSS部分的内容很简单，不必详谈。 <style> * { margin: 0; padding: 0; } .w { /* position: absolute; */ width: 80%;
前端 —— JavaScript 基础篇 18 -- window.pageYOffset
宁静致远
06-21 5114
最近想仿照淘宝首页的侧边栏，写个简单的小例子。获取滚动条距离顶部的距离用到了window.pageYOffset 方法。 window.pageYOffset 返回文档当前沿垂直轴（即向上或向下）滚动的像素数，其值为0.0，表示该Document的顶部边缘当前与窗口内容区域的顶部边缘对齐。pageYOffset是scrollY的一个别名是 window的只读属性 在IE9及以上、谷歌 、Safari、firefox，Opera(presto内核) 都支持 此语句 window.pageYO...
获取页面滚动距离pageYOffset、scrollY、scrollTop
qq_43654065的博客
09-23 5528
在获取页面滚动距离的高度时候，往往有不同的获取方式，而且不同的属性浏览器支持稍有差别： pageYOffset：属window对象，IE9+、Firefox、Chrome、Opera均支持该方式获取页面滚动敢赌值，并且会忽略DOCTYPE定义规则。 window.pageYOffset scrollY：属于window对象，Firefox、Chrome、Opera均支持，IE不支持，忽略DOCTYPE定义规则。 window.scrollY 页面如果未定义DOCTYPE文档头，所有浏览器都支持
【浏览器】window.pageXOffset/pageYOffset (相对于)页面偏移(CSS像素)
tuhuolong的专栏
02-20 3043
JS动态效果之 【侧边栏滚动固定效果】
egg_er的博客
12-27 2941
侧边栏滚动固定效果 滚动与scroll有关，我们使用 scroll 系列的相关属性可以动态的得到自己的大小scrollWidth; scrollHight（不含边框）、滚动距离scrollTop;scrollLeft等。 tips: 上面四个方法返回的值都是数值类型，不含单位的px的； 滚动是页面的滚动，我们知道当浏览器界面显示内容不全的时候就会出现滚动条，滚动条向下拉就能看到下方被隐藏的内容，同时我们当时页面的最上方也就被遮盖住了，想看到上方被遮盖住的部分，就需要滚动条向上拉。 在这里说一个方法能够获上
window.pageYOffset案例：淘宝侧边栏滚动效果
tuzi007a的博客
04-11 339
<!DOCTYPE HTML> <html> <head> <title>window.pageYOffset案例：淘宝侧边栏滚动效果</title> <meta charset="utf-8" /> <style> * { margin: 0; padding: 0; ...
vue+Parallax.js | 视觉差特效
01-07
vue+Parallax.js | 视觉差特效，图片与鼠标相反移动。
vue.js-div滚动条隐藏但有滚动效果的实现方法
11-29
组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.... var evt = window.event || arguments[0]
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
12-10
} 可是怎么没有达到预期效果呢，输出 document.body.scrollTop 的值一看，一直都是 0。原来是 DTD 的问题,要是页面直接用 开头的话就没有问题了。但是要符合 web 标准，DTD 当然是不能少的。具有 D
PyPI 官网下载 | django_vue_tabs-0.0.5.tar.gz
01-31
资源来自pypi官网。 资源全名：django_vue_tabs-0.0.5.tar.gz
Python库 | django-endless-pagination-vue-1.2.tar.gz
03-02
python库。 资源全名：django-endless-pagination-vue-1.2.tar.gz
PyPI 官网下载 | Flask-Vue-SFC-0.0.2.tar.gz
01-27
资源来自pypi官网。 资源全名：Flask-Vue-SFC-0.0.2.tar.gz
基于vue.js 2.x的虚拟滚动条的示例代码
01-19
记得以前偶然有一次浏览过一个开源的cms项目，发现这个项目的左边的菜单已经超出了windows的宽度，我就好奇为什么没出滚动条呢？然后我仔细一看，发现它左侧有一个小的div，然后我尝试着拖动它，发现竟能和原生的...
vue监听 vue实时监听窗⼝滚动条
最新发布
07-05
vue监听 vue实时监听窗⼝滚动条 1.在 mounted ⽣命周期函数注册滚动条事件
smooth-vuebar-平滑滚动条的Vue指令包装-Vue.js开发
05-27
smooth-vuebar smooth-scrollbar演示的Vue指令包装器您可以参考包装的库的演示。 为什么此Smooth-vuebar有很多其他包装器，用于Smooth-scrollbar演示的Vue指令...安装npm i smooth-vuebar Vue.use（SmoothVuebar）SSR
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; console.log(this.scrollTop);以上代码在获取页面滚动高度，打印不出来数据，为什么
06-03
在上述代码中，您定义了一个 `scrollTop` 变量来存储页面滚动高度。但是，当您尝试在控制台中打印 `this.scrollTop` 时，它并不会输出任何数据，这是因为 `this.scrollTop` 没有定义。正确的写法应该是 `console.log(scrollTop)`，这样才能输出页面滚动高度。 另外，注意在Vue中如果您想要在模板中访问 `scrollTop` 变量，需要将其定义在 `data` 中，例如： ``` data() { return { scrollTop: 0 } }, mounted() { window.addEventListener('scroll', this.handleScroll) }, methods: { handleScroll() { this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop } } ``` 在上述代码中，我们将 `scrollTop` 变量定义在了 `data` 中，并在 `handleScroll` 方法中更新了它的值。这样，我们就可以在模板中访问 `scrollTop` 变量了。例如，可以使用 `{{scrollTop}}` 来输出页面滚动高度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值