解决VUE中document.body.scrollTop为0

最新推荐文章于 2026-02-06 05:46:48 发布
转载 最新推荐文章于 2026-02-06 05:46:48 发布 · 2.2k 阅读 · 0

本文探讨了在Vue项目中遇到的document.body.scrollTop始终为0的问题，并揭示了解决这一现象的原因在于文档类型定义（DTD）。文章指导读者如何根据不同浏览器的行为选择正确的属性来获取滚动位置。

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 之 实现页面滑动到底部自动加载更多的效果、解决VUE 移动端网页中document.documentElement.scrollTop为0 的问题，兼容写法
夜阑珊妖妖
04-04 2338
解决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-ScrollTo 常见问题解决方案：从安装到高级优化的完整指南
最新发布
gitblog_07376的博客
02-06 484
Vue-ScrollTo 是一款专为 Vue.js 应用设计的滚动指令插件，能够轻松实现点击元素后平滑滚动到目标位置的功能。无论是单页应用还是复杂的多组件项目，它都能提供稳定可靠的滚动体验。本文将深入解析 Vue-ScrollTo 的常见问题及解决方案，帮助开发者快速排查并解决使用过程中遇到的各类难题。 ## 一、安装与基础配置问题 ### 1.1 Vue 3 兼容性问题 **问题表现**：
vue页面设置滚动失败的解决方案(scrollTop一直为0),vue页面无法滚动
李十三的博客
03-09 4862
这就涉及到一个知识点的误区: "让页面滚动到指定位置这个需求,不一定是让整个window滚动,在路由嵌套的vue页面中,window可能始终是没有滚动的,产生滚动条的是一个设置了固定高度,且子元素的高度超出了他本身的元素. 这时候,元素才会产生滚动条,而你一股脑的给window设置滚动条位置,window也蒙了"可是发现给某个div设置该属性后，一致为0。怎么看我这个方法适不适合你,你可以尝试打印滚动条的位置,页面滚动后,再次打印滚动条的位置,如果一直为0的话,那我的的这个方法就可以解决你遇到的问题.
vue js document.documentElement.scrollTop获取一直为0的解决方法
daishaochen的博客
09-15 6472
vue js document.documentElement.scrollTop获取一直为0的解决方法，vue封装组件后，常常是在组件里面继续轮滑，而document.documentElement.scrollTop拿到的是最外层浏览器的轮滑高度，所有一直是0。
scrollTop滚动的时候一直是0
月落星河
01-31 1968
一次项目scrollTop的小记，为body添加了onscroll的时候scrollTop一直是0，使用下面的方法 // documentElement 属性以一个元素对象返回一个文档的文档元素 document.documentElement.scrollTop || document.body.scrollTop 只是针对于body的时候会是0，我直接写了个box，就可以直接使用，出现这个如果是body不能使用的原因是应该是没有选中 <!DOCTYPE html> <html lan
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，可能是因为您的...
页面滚动到顶部方法
peade的博客
09-10 2万+
// 页面滚动到顶部 // 方法一 document.body.scrollTop=document.documentElement.scrollTop=0 // 方法二 document.body.scrollIntoView() // scrollIntoView 是元素也有的方法, 可以用在页面元素上，例如 document.getElementById('id').scrollInto...
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
图解初识JS中clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop概念
qq_26780317的博客
04-10 3963
前言：clientHeight、scrollHeight、offsetHeight、scrollTop、offsetTop这几个概念，在网上浩如烟海的文章中基本上都是文字解释，工具书中给出的图解也有些晦涩难懂，很难想象具体在窗口中的哪一部分。这次通过在网上查阅一些资料，在此mark一下，给出下文的图文相关解释。 一、整体初印象 首先，我们先来看一张图片，对这几个概念有一些初步的印象： 二...
VUE中`DOCUMENT.BODY.SCROLLTOP`的值总为零的解决办法
柠檬说葡萄你好酸
04-24 2143
最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DOCTYPE时，使用document.body。 IE和Firefox都是如此...
document.body.scroll
qq_42946917的博客
06-25 906
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWi...
document.body.scrollTop滚动失效
果果的博客
09-20 2279
先来说一下场景： 进入页面之后，需要页面滚动到指定的标签位置，但是如下设置之后，并没有什么效果 document.body.scrollTop=(0,300) 解决方案： let htmlDom = document.documentElement; htmlDom.scrollTo(0,300) 问题解决了，但是这2中写法有啥区别呢？咱们继续往下看： 1、什么是doc...
Vue项目中scrollTop一直为0该如何解决
trabecula_hj的博客
03-03 1935
Vue项目中scollTop一直为0该如何解决1. 用$refs方法获取页面实例(app.vue)2.监听页面滚动事件并将获取到的页面实例赋值给el3.最后点击返回顶部时将el页面的scrollTop属性设为0 项目要求：点击返回顶部页面回到最顶部 1. 用$refs方法获取页面实例(app.vue) 将获取到的el(app页面实例)存储进store中 <div id="app" ref="app"> <router-view/> </div> mounted(
document.body.scrollTop的值总为零的解决办法
sleepwalker_1992的专栏
06-13 2万+
1、document.body.scrollTop的值总为零的原因 有一个功能需要判断下拉的距离，设置头部固定导航栏的颜色。 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" c
为什么scrollTop设置后一直为0的解释和解决方案（精品）
热门推荐
kouryoushine的博客
08-19 5万+
背景 做前端希望页面能跳转到 某一位置用到了scrollTop属性。可是发现给某个div设置该属性后，一致为0。找了很多方案，但不都适合自己，或者说不知道是否适合。 Why scrollTop==0? 总而言之，所有情况都是因为你给一个没有滚动条的元素设置滚动条的位置。 什么时候存在滚动条？ 页面布局我们可以简单理解为 div盒子套div盒子。当内侧div盒子的高度大于外部时，外部的div就会出现...
记录vue练习遇到的问题：关于document.body.scrollTop
Wyx568的博客
12-09 843
从b页面返回至a页面时，会触发beforeRouteEnter、activated，我这里把改变滚动条位置做了一个判断，仅从b页面过来时才触发，我写在了activeted里。把之前存储的offsetTop给到document.body.scrollTop，这样就可以做到a页面的位置保持不变的效果。1.a页面跳转b页面后，b页面的document.body.scrollTop距离不是0而是a页面的值。2.a页面滑动一段距离后跳转b页面，再从b页面返回至a页面时，a页面滚动条位置没有保留原来的位置。
关于js中 document.body.scrollTop 不能返回正确值的原因
netingcn
06-25 5742
本来是为了通过document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素，但是不管滚动条在什么位置总是返回是0，造成这样的原因和html的头部声明有关，如果头部声明 为：http://www.w3.org/TR/html4/loose.dtd">，这样肯定得到的结果是 0，如果该为就能得到正确的结果，对于第一种头部声明想要得滚动条的滚动的高度怎么办，解决方法有两种1、v
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值