VUE中`DOCUMENT.BODY.SCROLLTOP`的值总为零的解决办法

最新推荐文章于 2025-06-25 09:39:01 发布
原创 最新推荐文章于 2025-06-25 09:39:01 发布 · 2.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在Vue项目中监听页面滚动时遇到的document.body.scrollTop始终为0的问题，并揭示了解决这一难题的关键在于理解不同浏览器对于文档滚动位置获取方式的区别。文章详细解释了当页面指定DOCTYPE时使用document.documentElement获取滚动位置的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0

但是发现document.body.scrollTop一直是0。

查资料发现是DTD的问题。

页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。

页面没有DTD，即没指定DOCTYPE时，使用document.body。

IE和Firefox都是如此。

vue 之 实现页面滑动到底部自动加载更多的效果、解决VUE 移动端网页中document.documentElement.scrollTop为0 的问题，兼容写法
夜阑珊妖妖
04-04 2303
解决VUE 移动端网页中document.documentElement.scrollTop为0 的问题，兼容写法 在做移动端网页时遇到的问题：Vue中document.documentElement.scrollTop的值总为零，解决办法如下： let top = document.documentElement.scrollTop || document.body.scrollTop || ...
解决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的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，
解决VUE中document.body.scrollTop为0
柠檬说葡萄你好酸
01-13 1万+
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DO
Vue-ScrollTo 插件使用指南：实现平滑滚动效果
最新发布
gitblog_00095的博客
06-25 687
Vue-ScrollTo 插件使用指南：实现平滑滚动效果 什么是 Vue-ScrollTo Vue-ScrollTo 是一个专为 Vue.js 2.x 设计的轻量级插件，它能够帮助开发者轻松实现页面元素的平滑滚动效果。与传统的锚点跳转不同，Vue-ScrollTo 提供了流畅的动画过渡，大大提升了用户体验。 核心特性 高性能动画：基于 window.requestAnimationFrame 实...
vue 中监听document.body.scrollTop 值总为0的解决方法
yw1376394716的博客
06-11 1万+
最近在vuex项目中碰到了这个问题，监听页面滚动时 document.body.scrollTop一直都是0，捣鼓了好久最后找到了几个解决方法 方法一：浏览器兼容有问题 写个兼容方法就行 // chrome || firefox || IE： // document.documentElement.scrollTop document.body.scrollTop // safari: window.pageYOffset let scrollTop= document.documentEleme
vue js document.documentElement.scrollTop获取一直为0的解决方法
daishaochen的博客
09-15 6409
vue js document.documentElement.scrollTop获取一直为0的解决方法，vue封装组件后，常常是在组件里面继续轮滑，而document.documentElement.scrollTop拿到的是最外层浏览器的轮滑高度，所有一直是0。
Document.body.scrollTop的值总为零的快速解决办法
09-02
在JavaScript中，`document.body.scrollTop` 是一个常用于获取网页滚动条顶部到页面内容顶部的距离的属性。然而，有时候你会发现这个属性的值始终为零，即使页面已经进行了滚动。这通常与文档类型声明（DOCTYPE）...
vue中使用window.pageYOffset document.documentElement.scrollTop document.body.scrollTop滚动时 值都为0 怎么解决
06-09
在 Vue 中，如果您希望获取窗口的滚动位置，可以使用 `window.pageYOffset` 或者 `document.documentElement.scrollTop`，这两个属性在现代浏览器中已经被广泛支持使用。 如果这些属性的值始终为0，可能是因为您的...
滚动事件：document.body.scrollTop总是0的原因
weixin_33918114的博客
03-09 796
document.body.scrollTop 转换成document.documentElement.scrollTop 具体原因可见：click here 转载于:https://www.cnblogs.com/powerplay/p/8536694.html
vue在初始化时给scrollTop设置一个值，但scrollTop却始终为0
daoxiaofei的博客
09-20 3559
在vue项目中往往有这样一个需求，在初始化时需要给某个容器的scrollTop设置一个值，一开始的想法是在created或者mounted中改变 scrollTop 的值，但是却出现了几个问题。 问题1：使用在created或者mounted中使用this.$refs.xxx获取不到容器 原因：在created或者mounted生命周期，页面刚挂载，还未完成渲染，获取不到dom节点。同样使用$ref无法获取样式。 解决方法：使用this.$nextTick() created () { this.$nex
document.body.scrollTop的值总为零的解决办法
热门推荐
sleepwalker_1992的专栏
06-13 2万+
1、document.body.scrollTop的值总为零的原因 有一个功能需要判断下拉的距离，设置头部固定导航栏的颜色。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c
scrollTop 一直未0
蚁族的奋斗的博客
09-18 155
https://www.jianshu.com/p/b0a39995b11f
【Vue】 scrollTop赋值一直为0
baidu_hxl的博客
07-08 5713
Vue项目中，给scrollTop赋值一直0，解决方案总结如下： mounted中：window设置scroll滚动事件 window.addEventListener('scroll', () => { this.scrollGroupSetting() }, false) destroyed中：移除scroll滚动事件 window.removeEventListener('scroll', this.scrollGroupSetting(true), false) 获取scro
js 获取滚动条位置 scrollTop总是0
weixin_43964271的博客
06-06 2675
由于页面导航栏是在页面中而非顶部固定的，所以需要在页面滚动到遮挡住导航栏的时候，在固定位置显示导航栏，我看网上案例类似的有页面向下滚动到一定位置的时候显示一键置顶的按钮等，都是类似的需求。改为①e.target.scrollTop获取div滚动位置；②addEventListener第三个参数设置成true，事件捕获，就可以实时获取div的滚动位置了。结果一直输出的是0，而且并不是一直监听，只输出几次；定义有滚动条的dev区域是box。
scrollTop总是0的原因
weixin_41143662的博客
11-21 8103
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 页面此时才正常. 原来是这行东西造成IE无法获取document.body.scrolltop! 把顶部这两行删掉将可以了.但是为什么会这样呢? google一下,发现改成: &a
解决vue的滚动条监听事件无效 解决vue的滚动条scrollTop距离总是为0无效问题
i_am_a_div的博客
12-30 3781
话不多说 直接上代码（方法可以直接复制拿去， html部分需要改成你的元素的ref和点击回到顶部的方法名称） html <section ref="scrollbox" class="inner-body"> <div> 这里放了很多内容 出现了滚动条 </div> </section> <button @click="gotop">点击置顶&
document.body.scrollTop总是零的原因
CaidChen的专栏
02-21 750
之前遇到了一个问题是由于document.body.scrollTop总是零的原因，郁闷了好久都没解决，查了才知是如下原因，以此告诫同样遇到此问题的兄弟姐妹。原来在HTML文件头部声明了这样一句：http://www.w3.org/TR/html4/loose.dtd">改成这样就好了：但页面稍有变化，感觉不爽，于是又在google里找，终于发现这是IE5与IE6的区别
Vue 中让页面滚动到指定位置 scrollTop 为 0 或不生效可能的原因
weixin_44383533的博客
07-20 4238
注意⚠️并不是在你想滚动的元素上面设置ref是需要在你想滚动的父元素上面添加ref。注意要添加this.$nextTick否则元素可能会获取不到。否则可能ref会一直滚动不到你想滚动的位置。使用ref获取dom。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值