JQuery,JS获取正确scrollTop
2015-11-02 21:18
711 查看
window.pageYOffset 被所有浏览器支持除了 IE 6, IE 7, IE 8, 不关doctype的事, 注IE9 开始支持此属性。
window.scrollY 被Firefox, Google Chrome , Safari支持 不关doctype的事, 注IE9 不支持此属性。
在(quirk 模式)的时候 document.body.scrollTop 在 Internet Explorer, Firefox, Opera, Google Chrome Safari 返回正确的值。
在(quirk 模式)的时候 document.documentElement.scrollTop 永远是零。
在(非quirk模式)的时候 document.documentElement.scrollTop在 Internet Explorer, Firefox and Opera 下返回正确的值 但是在 Google Chrome ,Safari 中永远是零。
特整理表格如下:
![](http://images.cnitblog.com/i/605091/201408/192310310816099.jpg)
只在quirk模式下, body.scrollTop是被所有都支持的,所以这个表大家不用也没有必要去记, 只要记住一条:以上在win7环境下测试,可以看出是非常凌乱的!
原则是看pageYOffset 然后看documentElement.scrollTop, 最后是document.body.scrollTop!
window.scrollY 被Firefox, Google Chrome , Safari支持 不关doctype的事, 注IE9 不支持此属性。
在(quirk 模式)的时候 document.body.scrollTop 在 Internet Explorer, Firefox, Opera, Google Chrome Safari 返回正确的值。
在(quirk 模式)的时候 document.documentElement.scrollTop 永远是零。
在(非quirk模式)的时候 document.documentElement.scrollTop在 Internet Explorer, Firefox and Opera 下返回正确的值 但是在 Google Chrome ,Safari 中永远是零。
特整理表格如下:
![](http://images.cnitblog.com/i/605091/201408/192310310816099.jpg)
只在quirk模式下, body.scrollTop是被所有都支持的,所以这个表大家不用也没有必要去记, 只要记住一条:以上在win7环境下测试,可以看出是非常凌乱的!
if(window.pageYOffset){//这一条滤去了大部分, 只留了IE678 }else if(document.documentElement.scrollTop ){//IE678 的非quirk模式 }else if(document.body.scrolltop){//IE678 的quirk模式 }
原则是看pageYOffset 然后看documentElement.scrollTop, 最后是document.body.scrollTop!
//正确获取的方法总结 var scrollTop = window.pageYOffset||document.documentElement.scrollTop || document.body.scrollTop;
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- 广告行业抱怨 Safari 的防追踪技术 ITP 太有效,严重影响收入
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 把Chrome OS安装在VMWare下及Chrome OS的关键特性和一些截图
- 浏览器 cookie 限制
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法