document.documentElement.scrollTop || document.body.scrollTop;

最新推荐文章于 2025-07-14 22:17:55 发布
最新推荐文章于 2025-07-14 22:17:55 发布
阅读量2.1w 收藏 17
点赞数 4
CC 4.0 BY-SA版权
文章标签： xhtml javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tfgdd/article/details/5182033
本文介绍了在XHTML标准网页中如何正确获取body元素的滚动位置。通过使用document.documentElement.scrollTop代替document.body.scrollTop的方法，可以确保在不同浏览器环境下都能获得正确的坐标值。

在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代document.body,可以这样写
例：
var top = document.documentElement.scrollTop || document.body.scrollTop;
在javascript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例。
例：
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
这么写可以得到很好的兼容性。

相反，如果不做声明的话，document.documentElement.scrollTop反而会显示为0。

顺便再存一下这个图吧，总是挺难记清楚

tfgdd
关注
document.documentElement document.documentElement.scrollTop
01-19
在标准的浏览器下，需要注意的东西，例如双击自动滚动 var diffY; if (document.documentElement && document.documentElement.scrollTop)     diffY = document.documentElement.scrollTop; else if (document.body)     diffY = document.body.scrollTop else     {/*Netscape stuff*/}
document.body.scrollTop用法
12-16
document.body.scrollTop用法
收集关于scrollTop信息
weixin_30678349的博客
04-13 443
要获取当前页面的滚动条纵坐标位置，用： document.documentElement.scrollTop; 而不是： document.body.scrollTop; documentElement 对应的是 html 标签，而 body 对应的是 body 标签。在标准w3c下，document.body.scrollTop恒为0，需要用doc...
document.documentElement详解
最新发布
软考鸭
07-14 378
定义与 的区别 常见用途 1. 操作根元素样式 2. 获取文档尺寸 3. 动态主题切换 注意事项 兼容性XML 文档与 的区别
document.body.scrollTop与document.documentElement.scrollTop兼容
tudusi
11-25 380
document.body.scrollTop与document.documentElement.scrollTop兼容 这两天在写一个JS的网页右键菜单，在实现菜单定位的时候发现了这个问题：chrome居然不认识document.documentElement.scrollTop！ 看前辈们的文章，纷纷表示如果有文档声明（即网页第一句的docType）的情况下，标...
document.body.scrollTop or document.documentElement.scrollTop
weixin_34032779的博客
11-13 108
　　用Javascript获取DOM节点相对于页面的绝对坐标时，需要计算当前页面的滚动距离，而这个值的获取又取决于浏览器。 　　在Firefox或Chrome浏览器的控制台可以查看document.body 对应于页面中 <body></body>部分的元素，而document.documentElement则相当于整个HTML，说明浏览器在解释渲染后的页面位置范围是存在...
document.documentElement && document.documentElement.scrollTop
10-30
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; console.log('当前滚动位置：', scrollTop); }; ``` 总的来说，理解和正确使用`document....
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定...
Document.body.scrollTop的值总为零的快速解决办法
09-02
在标准模式下，浏览器倾向于使用`document.documentElement.scrollTop`来获取页面的滚动位置，而不是`document.body.scrollTop`。 `document.documentElement` 指的是HTML文档的根元素，即`<html>`标签。在标准模式...
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
09-05
这段代码首先尝试获取`window.pageYOffset`，如果浏览器不支持，则回退到`document.documentElement.scrollTop`，如果还不行，再尝试`document.body.scrollTop`，最后如果所有尝试都失败，将`scrollTop`设为0。...
document.documentElement.scrollTop || document.body.scrollTop
dbrb71278的博客
07-11 159
如果有doctype的声明,需要用document.documentElement.scrollTop没有doctype的声明,用document.body.scrollTop 转载于:https://www.cnblogs.com/Tachi/p/5660793.html
document.documentElement.scrollTop(获取滚动条位置)
bangxionger9224的博客
03-11 282
要获取当前页面的滚动条纵坐标位置，用：document.documentElement.scrollTop;而不是：document.body.scrollTop;documentElement 对应的是 html 标签，而 body 对应的是 body 标签。在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.s...
document.documentElement.scrollTop与document.body.scrollTop
Fair_feng的博客
04-28 1758
问题针对document.documentElement.scrollTop和document.body.scrollTop. 1、在IE Firefox Opera 现代浏览器的标准模式下，使用document.documentElement.scrollTop获取高度，混杂模式下，也就是没有DTD文档声明，则使用document.body.scrollTop. 2、Chrome Safari
document.documentElement.scrollTop
weixin_44283589的博客
08-05 8135
在标准的w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;js中每个载入浏览器的HTML文档都会成为Document对象，documentElement 对应的是 html 标签，如果发现两个高度不一样，是css设置的问题，你的html高度不一定高于body。用body查看，其中clientHeight即为body的css高度，而不是：document.body.scrollTop;...
关于document.documentElement.scrollTop
loku1994的博客
09-23 538
这是浏览器页面被滚上去的距离，在Opera和chrome中要使用document.body.scrollTop. getBoundingClientRect()它返回left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口左上角的距离。
document.documentElement.scrollTop(获取滚动条位置,超细)
qq_61686552的博客
06-21 3976
document.documentElement.scrollTop的使用方法还有解释
解决scrollTop兼容问题 document.documentElement.scrollTop || document.body.scrollTop
YOUAFR的博客
10-19 1710
在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代docum
uni-app 获取不到document.documentElement.scrollTop || document.body.scrollTop
06-10
<think>根据用户的问题，用户希望在uni-app中解决无法获取document.documentElement.scrollTop或document.body.scrollTop的问题。从用户提供的引用中可以看到，在uni-app中，使用传统的DOM操作方式（如document对象）可能无法正常工作，因为uni-app运行在小程序或移动端环境中，这些环境没有完整的浏览器DOM。用户引用的[1]展示了传统JS中通过documentElement.scrollTop或body.scrollTop获取滚动位置的方式，但在uni-app中不适用。用户引用的[2]展示了一个在uni-app中封装滚动条置底的方法，使用了uni.createSelectorQuery()来获取节点信息，然后通过boundingClientRect获取高度信息，并设置scrollTop。这提示我们，在uni-app中应该使用其提供的API来操作节点。因此，解决方案的核心是使用uni-app的节点查询API（createSelectorQuery）来获取滚动容器的信息，然后通过计算得到滚动位置。具体步骤：1.为需要获取滚动位置的滚动容器设置一个id（例如#scroll-view）。2.使用uni.createSelectorQuery()创建一个节点查询对象，然后通过select()方法选择该容器。3.调用boundingClientRect()获取容器的位置和尺寸信息，包括滚动高度（但注意，boundingClientRect只能获取视图信息，滚动位置需要另外获取）。4.然而，boundingClientRect并不能直接得到滚动条的位置。实际上，我们需要监听滚动事件来记录滚动位置，或者使用scrollOffset相关方法。重新思考：uni-app中获取滚动条位置的正确方式在uni-app中，如果我们使用的是scroll-view组件，那么在滚动事件中，事件对象event.detail可以获取到scrollTop和scrollLeft。如果我们没有使用scroll-view，而是使用页面本身的滚动，那么在onPageScroll生命周期函数中可以获取到页面滚动的距离（单位是px）。根据uni-app文档：-对于页面的滚动，可以在页面的onPageScroll生命周期中获取到滚动距离。-对于scroll-view组件的滚动，可以通过绑定scroll事件，在event.detail中获取。因此，解决方案分为两种情况：情况一：获取页面滚动距离在页面的onPageScroll生命周期中监听滚动事件：```javascriptonPageScroll(e){console.log(e.scrollTop);//这里e.scrollTop就是页面的滚动距离}```情况二：获取scroll-view组件的滚动距离在scroll-view组件上绑定scroll事件：```vue<scroll-viewscroll-y="true"@scroll="scrollEvent"><!--内容--></scroll-view>```在methods中定义scrollEvent方法：```javascriptscrollEvent(e){console.log(e.detail.scrollTop);}```如果用户想要主动获取滚动位置，而不是在滚动事件中获取，那么：-对于页面滚动，目前uni-app没有提供直接获取页面滚动位置的API，所以只能通过onPageScroll记录到一个变量中。-对于scroll-view，可以使用组件的scrollTop属性，或者通过uni.createSelectorQuery().select()方法获取scroll-view实例，然后使用fields方法获取scrollOffset。对于scroll-view，我们可以这样获取当前的滚动位置：```javascriptletview=uni.createSelectorQuery().select('#scroll-view');view.fields({scrollOffset:true},data=>{console.log(data.scrollTop);//这里就是滚动条的位置}).exec();```总结：1.如果用户的问题是关于页面滚动的，则无法直接获取，需要在onPageScroll中记录滚动位置。2.如果用户的问题是关于scroll-view的，则可以通过上述的节点查询方法获取。根据用户的问题描述，用户可能是在尝试获取页面滚动位置。在uni-app中，由于运行环境不同，传统的documentElement.scrollTop不可用，必须使用uni-app提供的API。因此，解决方案：-如果用户想要监听页面的滚动位置，则使用onPageScroll生命周期函数。-如果用户需要在scroll-view中获取滚动位置，则使用scroll事件或节点查询。注意：用户提到返回0或undefined，很可能是因为在uni-app的页面中，并没有documentElement对象，所以获取的是undefined；而在某些环境下document.body.scrollTop可能返回0。下面提供两种场景下的解决方案代码：场景一：监听页面滚动在页面的js中：```javascriptexportdefault{data(){return{scrollTop:0}},onPageScroll(e){this.scrollTop=e.scrollTop;//记录滚动位置到scrollTop变量}}```场景二：获取scroll-view的滚动位置（主动获取）在scroll-view上设置id，比如id="myScroll"```javascriptgetScrollPosition(){uni.createSelectorQuery().select('#myScroll').fields({scrollOffset:true},res=>{console.log('滚动位置:',res.scrollTop);}).exec();}```如果用户使用的是小程序，请注意uni.createSelectorQuery在自定义组件中的使用需要加.in(this)（如引用[2]中所示），如果不是自定义组件则不需要。因此，根据用户的具体场景，选择合适的方法。相关问题生成：1.在uni-app中如何实现页面滚动到指定位置？2.在uni-app的scroll-view组件中，如何动态设置滚动条位置？3.uni-app的onPageScroll生命周期函数有什么使用限制？4.在uni-app中如何监听页面的滚动事件？注意：用户是在uni-app环境下，所以回答必须基于uni-app的API，而不是传统浏览器DOM方法。</think> 在uni-app中无法使用传统浏览器API获取滚动位置的问题，根源在于uni-app基于Vue.js框架开发，主要运行在小程序环境而非浏览器环境中。以下是具体解决方案和代码实现： ### 📌 核心解决方案：使用uni-app原生API替代DOM操作 1. **页面级滚动位置获取**（推荐） ```javascript // 在页面生命周期中监听滚动 onPageScroll(e) { console.log("当前滚动位置：", e.scrollTop) // 单位px this.scrollPosition = e.scrollTop } ``` 2. **scroll-view组件滚动位置获取** ```vue <scroll-view scroll-y @scroll="handleScroll" id="scrollContainer" > <!-- 内容区域 --> </scroll-view> ``` ```javascript methods: { handleScroll(e) { console.log("scroll-view滚动位置：", e.detail.scrollTop) } } ``` 3. **主动获取滚动位置**（异步API） ```javascript // 获取页面滚动位置 uni.pageScrollTo({ scrollTop: 0, duration: 0, success: () => { const query = uni.createSelectorQuery() query.selectViewport().scrollOffset(res => { console.log("当前滚动位置：", res.scrollTop) }).exec() } }) ``` ### ⚠️ 关键注意事项 1. **环境差异处理** ```javascript // 条件编译处理不同平台 let scrollTop = 0 // #ifdef H5 scrollTop = document.documentElement.scrollTop || document.body.scrollTop // #endif // #ifndef H5 uni.pageScrollTo({ /* ... */ }) // 使用uni API // #endif ``` 2. **滚动容器要求** - 使用`scroll-view`时必须设置固定高度 ```css /* 必须设置高度才能触发滚动 */ #scrollContainer { height: 100vh; overflow-y: auto; } ``` 3. **节点查询时机** ```javascript // 确保DOM渲染完成后再获取 this.$nextTick(() => { uni.createSelectorQuery() .select('#scrollContainer') .boundingClientRect(res => { console.log("容器高度:", res.height) }).exec() }) ``` ### 💡 滚动位置应用示例 ```javascript // 滚动到底部实现 scrollToBottom() { uni.createSelectorQuery() .select('#message-scroll') .boundingClientRect(res => { uni.pageScrollTo({ scrollTop: res.height, duration: 300 }) }).exec() } ``` > **技术说明**：uni-app的运行环境与浏览器存在本质差异。小程序平台使用JSCore而非WebView，因此传统DOM API（如document）不可用。建议开发者优先使用uni-app的[页面滚动API](https://uniapp.dcloud.io/api/ui/scroll)和[节点查询API](https://uniapp.dcloud.io/api/ui/nodes-info)[^2]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值