前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >获取页面滚动距离pageYOffset、scrollY、scrollTop

获取页面滚动距离pageYOffset、scrollY、scrollTop

原创
作者头像
用户1349575
发布2022-02-13 14:01:06
3.7K0
发布2022-02-13 14:01:06
举报
文章被收录于专栏:编程社区

在获取页面滚动距离的高度时候,往往有不同的获取方式,而且不同的属性浏览器支持稍有差别:

pageYOffset:属window对象,IE9+、Firefox、Chrome、Opera均支持该方式获取页面滚动敢赌值,并且会忽略DOCTYPE定义规则。

代码语言:javascript
复制
window.pageYOffset

scrollY:属于window对象,Firefox、Chrome、Opera均支持,IE不支持,忽略DOCTYPE定义规则。

代码语言:javascript
复制
window.scrollY

页面如果未定义DOCTYPE文档头,所有浏览器都支持docume.body.scrollTop属性获取滚动高度。

代码语言:javascript
复制
document.body.scrollTop

如果页面定义了DOCTYPE文档头,那么HTML元素上的scrollT属性在IE、Firefox、Opera(presto内核)下都可以获取滚动高度值,而在Chrome和Safari下其值为0。

代码语言:javascript
复制
document.documentElement.scrollTop; //Chrome,Safari下为0

此在获取页面滚动高度的时候优先考虑使用 window.pageYOffset 然后在使用scrollTop。

代码语言:javascript
复制
 var _scrollLeft = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft 
 var _scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档