关灯
首页
论坛首页
大咖专栏
大咖专栏
热点资讯
热点资讯
精彩活动
精彩活动
关于
关于
本版
文章
帖子
用户
登录
注册
快捷登录
投稿
EOIT论坛
›
社区交流
›
WEB前端
›
原生js获取scrollTop
返回列表
原生js获取scrollTop
[复制链接]
doubleyong
发表于 2019-2-26 22:14:20
|
显示全部楼层
|
阅读模式
1、各浏览器下 scrollTop的差异
IE6/7/8:
对于没有doctype声明的页面里可以使用
document.body.scrollTop
来获取 scrollTop高度
;
对于有doctype声明的页面则可以使用
document.documentElement.scrollTop;
Safari:
safari 比较特别,有自己获取scrollTop的函数 :
window.pageYOffset ;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用
document.documentElement.scrollTop ;
2、
获取scrollTop值
完美的获取scrollTop 赋值短语 :
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
通过这句赋值就能在任何情况下获得scrollTop 值。
仔细观察这句赋值,你发现啥了没??
没错, 就是
window.pageYOffset (Safari) 被放置在 || 的中间位置。
因为当
数字0
与
undefine
进行 或运算时,系统默认返回最后一个值。即或运算中 0 == undefine ;
当页面滚动条刚好在最顶端,即scrollTop值为 0 时。 IE 下 window.pageYOffset (Safari) 返回为 undefine ,此时将window.pageYOffset (Safari) 放在或运算最后面时, scrollTop 返回 undefine , undefine 用在接下去的运算就会报错咯。
而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine. 可以安全使用..
所以说到头还是IE的问题咯. 杯具…
精神有点恍惚,不知道有没有表达清楚。
不过最后总结出来这句实验过OK,大家放心使用(测试OK);
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
转自:
https://www.cnblogs.com/vali/p/8986535.html
回复
举报
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
doubleyong
版主
0
关注
14
粉丝
75
帖子
发送私信
收听TA
Ta的主页
热门图文
微信小程序插件系列(一)日历插件
中国平安产品经理和app开发打架视频事件始
如何有效的学习Web前端开发?
微信小程序-音乐播放器详解
如何从零开始学Java
零基础小白如何学习UI设计
热门帖子
WEB前端
微信小程序插件系列(一)日历插件
新手报到
中国平安产品经理和app开发打架视频事件始
新手报到
报道贴
WEB前端
如何有效的学习Web前端开发?
WEB前端
微信小程序-音乐播放器详解
Java大数据
如何从零开始学Java
UI设计
零基础小白如何学习UI设计
WEB前端
常见的js设计模式,面试必备
排行榜
日
周
月
1
百杰197开班啦!~~~
百杰197部开班啦!~~~ 方向:web
159
0
2
✿✿✿国信安教育百杰191部测试班级信息✿
✿✿✿国信安教育百杰191部测试班级信息✿✿✿ 班 级:百杰191部 专业方向:软件测
159
1
3
国信安教育百杰195部前端班
✿✿✿国信安教育百杰195部前端班级信息✿✿✿ 班 级:百杰w195部 专业方向:web
139
0
4
html中如何让文字竖排
在写网页时,为了让页面好看,可能会考虑使用竖排文字,在使用时发现不简单.第一种:原始
146
0
5
可查询每个时代流行配色组合的Color Leap
每个时代都有代表的文化和呈现样貌,如果对于一些绘画或摄影作品有研究,可能也会发现
154
0
6
设计页面单薄,如何提升质感?
质感是什么?如何让画面拥有更高端的质感?本文由质感的原理出发,深入分析质感表现所
184
0
7
面型图标vs线型图标,哪一种的用户体验会更
什么时候该用线型图标,什么时候该用面型图标,不知道大家平时有没有去思考过?我自己
148
0
8
193JAVA开班了
看过来,193的哥哥姐姐们。
203
0
9
js中 ECMAScript位运算符
ECMAScript位运算符: https://blog.csdn.net/qwlzxx/article/details/46669985 摘抄
170
0
10
UI布局中颜色的使用原理
色彩在GUI的交互中扮演着重要的角色。合理的使用颜色,能帮助用户快捷的发现界面中的
172
0
1
微信小程序插件系列(一)日历插件
近期有玩小程序的朋友问我在小程序中如何引用插件。那么近期就给大家推荐几款实用的微
8539
1
2
中国平安产品经理和app开发打架视频事件始
据爆料,中国平安一个产品经理和APP开发人员在办公室直接打起来了,据称是产品经理向A
6609
2
3
如何有效的学习Web前端开发?
一个好的Web前端工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高
4487
8
4
微信小程序-音乐播放器详解
大家好,上一篇分享了如何获取酷狗的音乐资源,今天给大家聊一下微信小程序中音
4378
2
5
如何从零开始学Java
虽然Java面象对象很多东西都是被封装好的直接用,相对其他语言没那么复杂,但是学的东
3417
1
6
零基础小白如何学习UI设计
用户体验至上的时代已经来临。能够吸引到用户的界面,都是UI设计师的精心设计的功劳。
3350
4
7
常见的js设计模式,面试必备
每个JS开发者都力求写出可维护、复用性和可读性高的代码。随着应用不断扩大,代码组织
3333
19
8
常用酷狗音乐资源接口
这几天在大学带小朋友们玩微信小程序,有的学生不知道如何获取到音乐资源,今天
3331
4
9
论坛攻略-----如何获得积分与安仔币、快速
国信安论坛——EOIT上线啦!!!赶快来玩转论坛,获取积分,领取礼品哟!!! 积分与
3180
0
10
国信安教育百杰☆☆☆就业信息☆☆☆
国信安教育2018年学员就业信息展示——你也可以像他们一样拿高薪哦!!!
3123
16
1
百杰197开班啦!~~~
百杰197部开班啦!~~~ 方向:web
159
0
2
✿✿✿国信安教育百杰191部测试班级信息✿
✿✿✿国信安教育百杰191部测试班级信息✿✿✿ 班 级:百杰191部 专业方向:软件测
159
1
3
国信安教育百杰195部前端班
✿✿✿国信安教育百杰195部前端班级信息✿✿✿ 班 级:百杰w195部 专业方向:web
139
0
4
html中如何让文字竖排
在写网页时,为了让页面好看,可能会考虑使用竖排文字,在使用时发现不简单.第一种:原始
146
0
5
可查询每个时代流行配色组合的Color Leap
每个时代都有代表的文化和呈现样貌,如果对于一些绘画或摄影作品有研究,可能也会发现
154
0
6
设计页面单薄,如何提升质感?
质感是什么?如何让画面拥有更高端的质感?本文由质感的原理出发,深入分析质感表现所
184
0
7
面型图标vs线型图标,哪一种的用户体验会更
什么时候该用线型图标,什么时候该用面型图标,不知道大家平时有没有去思考过?我自己
148
0
8
193JAVA开班了
看过来,193的哥哥姐姐们。
203
0
9
js中 ECMAScript位运算符
ECMAScript位运算符: https://blog.csdn.net/qwlzxx/article/details/46669985 摘抄
170
0
10
UI布局中颜色的使用原理
色彩在GUI的交互中扮演着重要的角色。合理的使用颜色,能帮助用户快捷的发现界面中的
172
0
作者专栏
750
刘大阳
200
大菲
161
安仔
139
意大利炮
114
小川
84
丘丘
关闭
站长推荐
/1
论坛攻略-----如何获得积分与安仔币、快速升级
国信安论坛——EOIT上线啦!!!赶快来玩转论坛,获取积分,领取礼品哟!!!
查看 »
快速回复
返回顶部
返回列表