IE、FF、Safari 等浏览器下scrollTop的差异
来源:互联网 发布:大数据可视化展示 编辑:程序博客网 时间:2024/06/13 03:24
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
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
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 中永远是零
以上在win7环境下测试
可以看出是非常凌乱的
只在quirk模式下, body.scrollTop是被所有都支持的
所以这个表大家也不用 也没有必要去记, 只要记住一条
if(window.pageYOffset){//这一条滤去了大部分, 只留了IE678
}else if(document.documentElement.scrollTop ){//IE678 的非quirk模式
}else if(document.body.scrolltop){//IE678 的quirk模式
原则是看pageYOffset 然后看documentElement.scrollTop, 最后是document.body.scrollTop
当然 也可以直接scrollTop 而不使用pageYOffset
以下是MDN 提供的兼容性代码
scrolltop = (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollTop == ‘number’ ? t : document.body).scrollTop
- IE、FF、Safari 等浏览器下scrollTop的差异
- 各浏览器下 scrollTop的差异
- IE和FF的差异
- 关于scrolltop 兼容 IE6/7/8, Safari,FF的方法
- 关于scrolltop 兼容 IE6/7/8, Safari,FF的方法
- IE,FF下JS闭包的资源释放差异
- IE、FF、Safari、OP不同浏览器兼容报告
- struts2文档下载支持Chrome safari FF IE Opera浏览器
- js判断浏览器版本(IE,FF,Chrome,Opear,Safari)
- IE、FF、Safari、OP不同浏览器兼容报告
- IE、FF、Safari、OP不同浏览器兼容报告
- js 获取浏览器IE、FF、Chrome、Opera、Safari
- IE、FF、Safari、OP不同浏览器兼容报告
- 常用:判断用户使用浏览器是FF、Safari还是IE
- js 加载xml 兼容各个浏览器,safari,ie ff,
- 在IE、FF、Chrome下scrollTop(或scrollLeft)的区别
- Firefox、IE、Safari、Chrome、Opera浏览器之差异
- JS判断IE,FF等浏览器类型
- JS中的this关键字
- Android Layout 布局属性
- magento搬家 magento换服务器步骤 更改数据库连接 更换域名
- 关于IplImage中widthstep的大小与width,nchanne
- 老BOJ 09 Maximum sum
- IE、FF、Safari 等浏览器下scrollTop的差异
- 安装IE11导致Poser2014无法启动
- Apache 403 Forbidden error
- 堆排序
- spring源码之spring启动三
- get the base application URL?
- php正则去掉全半角标点及空白
- Android截取字段和字符串
- 使用Flash骨骼工具制作角色动画