JS_获取当前页面的滚动条位置的兼容

逃离我推掉我的手 2022-11-29 11:59 300阅读 0赞

# 方法一 #

const getScrollPosition = (el = window) => ({  
        x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft, 
        y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop 
    }); 
    getScrollPosition(); // {x: 0, y: 200}

# 方法二 #

**获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop  
获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft  
pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。**\*

### 1.各浏览器下 scrollTop的差异: ###

**IE6/7/8：**

可以使用document.documentElement.scrollTop；

**IE9及以上：**

可以使用window.pageYOffset或者document.documentElement.scrollTop

**Safari:**

safari：window.pageYOffset与document.body.scrollTop都可以；

**Firefox:**

火狐等等相对标准些的浏览器就省心多了，直接用window.pageYOffset 或者document.documentElement.scrollTop ；

**Chrome：**

谷歌浏览器只认识document.body.scrollTop;

### 2.获取scrollTop的值 ###

可以使用window.pageYoffset

Window pageXOffset和pageYOffset属性

其定义：pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

**所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。**

注意：IE 8 及 更早 IE 版本不支持该属性,但可以使用 “document.documentElement.scrollLeft” 和 “document.documentElement.scrollTop” 属性 。

由于谷歌兼容问题，可以使用document.body.scrollLeft和document.body.scrollTop或者window.pageXoffset与window.pageYoffset。

### 3. scrollTOp 兼容性的写法 ###

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

[js获取视口高度，滚动高度，文档高度==>传送门][js]

[js]: https://www.jianshu.com/p/193789c14138

发表评论取消回复

表情：

评论列表（有 0 条评论，300人围观）

还没有评论，来说两句吧...

相关阅读

相关实时获取浏览器滚动条高度（兼容写法）

目录一、js版本写法二、jquery版本写法 -------------------- 一、js版本写法 <script type="text/jav

悠悠/ 2023年10月03日 15:12/ 0 赞/ 129 阅读

相关 JS_获取当前页面的滚动条位置的兼容

方法一 const getScrollPosition = (el = window) => ({ x: el.pageXOffset !==

逃离我推掉我的手/ 2022年11月29日 11:59/ 0 赞/ 301 阅读

相关 JS 监听是否在当前页和 js 控制滚动条位置

// 监听是否在当前页，并置为已读 document.addEventListener("visibilitychange", () => \{ if

秒速五厘米/ 2022年09月06日 00:23/ 0 赞/ 300 阅读

相关 js兼容多浏览器的关闭当前页面

//FF中需要修改配置window.close方法才能有作用，为了不需要用户去手动修改，所以用一个空白页面显示并且让后退按钮失效 //Opera浏览器旧版本(小

偏执的太偏执、/ 2022年08月27日 10:54/ 0 赞/ 352 阅读

相关 js获取当前页面的URL信息

设置或获取对象指定的文件名或路径。 alert(window.location.pathname) 设置或获取整个 URL 为字符串。 alert(win

r囧r小猫/ 2022年08月18日 11:56/ 0 赞/ 458 阅读

相关 JS控制滚动条的位置 JS控制TextArea滚动条自动滚动到最下部

S控制滚动条的位置 window.scrollTo(x,y); 竖向滚动条置顶 window.scrollTo(0,0); 竖向滚动条置底

青旅半醒/ 2022年06月16日 09:10/ 0 赞/ 544 阅读

相关 js 获取当前页面的url等

作者：LoveEmperor-王子様例：[http://localhost:8081][http_localhost_8081] `var curr

小咪咪/ 2022年05月15日 15:25/ 0 赞/ 485 阅读

相关 vue 定位元素滚动至元素位置兼容ios 获取元素的位置

1、获取元素的位置 var h = document.querySelector('id').offsetTop 2、设置滚动位置 // 此方法适合谷歌

分手后的思念是犯贱/ 2022年04月10日 01:55/ 0 赞/ 840 阅读

相关 js获取页面滚动条宽度

let cached; function getScrollBarSize(fresh){ //fresh 是否重新获取, cached: 是否获取

阳光穿透心脏的1/2处/ 2021年12月14日 05:57/ 0 赞/ 529 阅读

相关 js获取当前页面的URL

在很多场景中我们需要在某个界面（不能确定的界面）跳转到另一个界面进行某项操作，然后操作完毕之后重新跳转到之前的页面（如浏览商品的过程中进行登录，登录后返回到浏览商品的界面），因

Myth丶恋晨/ 2021年09月26日 06:22/ 0 赞/ 701 阅读