JS中完美兼容各大浏览器的scrolltop方法


Posted in Javascript onApril 17, 2015

1、各浏览器下 scrollTop的差异

IE6/7/8/9/10:

对于没有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,大家放心使用。

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

这是完美的获取scrollTop赋值语句。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
js闭包的用途详解
Nov 09 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 #Javascript
JS获取图片高度宽度的方法分享
Apr 17 #Javascript
JS替换字符串中空格方法
Apr 17 #Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 #Javascript
jQuery实现自定义事件的方法
Apr 17 #Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 #Javascript
js实现touch移动触屏滑动事件
Apr 17 #Javascript
You might like
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
JavaScript实现的拼图算法分析
2019/02/13 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Python中取整的几种方法小结
2017/01/06 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
Python实现全排列的打印
2018/08/18 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
白血病捐款倡议书
2014/05/14 职场文书
保险公司开门红口号
2014/06/21 职场文书
妇女工作先进事迹
2014/08/17 职场文书
婚姻出轨保证书
2015/05/08 职场文书
入党介绍人考察意见
2015/06/01 职场文书
初中历史教学反思
2016/02/19 职场文书
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
mysql函数全面总结
2021/11/11 MySQL