关于onscroll函数兼容各浏览器的方法分析
关于window.onscroll函数兼容各浏览器的方法分析
1、当前文档的渲染模式是决定onscroll函数兼容性根本原因
目前浏览器的排版引擎有三种模式:怪异模式(Quirks mode)、接近标准模式(Almost standards mode)、以及标准模式(Standards mode)。对HTML文件来说,浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。如果文档没有声明DOCTYPE,会令浏览器触发怪异模式。例如<!DOCTYPE html>,是所有可用的DOCTYPE之中最简单的,而且是HTML5 所推荐的。在 HTML5中,DOCTYPE 唯一的作用是启用标准模式。更早期的 HTML 标准会附加其他意义,但没有任何浏览器会将 DOCTYPE 用于怪异模式和标准模式之间互换以外的用途。
2、获取当前文档的渲染模式
代码如下:
mode = document.compatMode;
- 如果文档处于“怪异模式(Quirks mode)”,则该属性值为
"BackCompat"
- 如果文档处于“标准模式(Standards mode)”或者“准标准模式(almost standards mode)”,则该属性为
"CSS1Compat"
3、代码分析
就拿获取scrollTop来举例:
- document.body.scrollTop在当前文档处于“怪异模式(Quirks mode)”(即上段代码中mode = "
BackCompat
")使用,当HTML文档没有声明DOCTYPE的时候,浏览器可以识别。 - document.documentElement.scrollTop在当前文档处于“标准模式(Standards mode)”或者“准标准模式(almost standards mode)”(即上段代码中mode = "
CSS1Compat
")使用,当HTML文档正确声明DOCTYPE的时候,就可能会启用标准模式,是否启用取决于浏览器本身。 - window.pageYOffset最为特殊,并不取决于文档的渲染模式,而是取决于浏览器本身是否存在此属性。
各浏览器对上述代码兼容情况:
- IE6/7/8:没有doctype声明的html文档使用 document.body.scrollTop,否则使用document.documentElement.scrollTop。这些版本的浏览器中window.pageYOffset属性是undefined,因此无效。
- Google Chrome,Firefox,IE9+: document.body.scrollTop 和 document.documentElement.scrollTop 使用方式同上,但window.pageYOffset 无论doctype是否声明,浏览器都可以识别。(早前的chrome只能识别document.body,也就是documentElement对应body标签,自用chrome更新63以上版本以后正确doctype文档声明document.body.scrollTop恒为0,document.documentElement.scrollTop正常,chrome也没有早前那样特立独行了)。
- Safari: 浏览器特殊,目前只有window.pageYOffset有效。
MDN上完整的兼容性代码如下:
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
当然还有最终写法:
var scrollTop = document.documentElement.scrollTop || window.pageYOffset
|| document.body.scrollTop;
注意放置顺序:window.pageYOffset被放置在 || 的中间位置。
因为当 数字0 与 undefine 进行"||"运算时,系统默认返回最后一个值。即"||"运算中 "0 || undefine == undefine" ;
当页面滚动条刚好在最顶端,即scrollTop值为 0 时。 window.pageYOffset(IE9<)会返回为 undefine ,此时将window.pageYOffset放在"||"运算最后面时, scrollTop 返回 undefine (0 || 0 || undefine == undefine), 浏览器会报错。
而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine. 可以安全使用。
参考
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollY
http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332076.html
关于onscroll函数兼容各浏览器的方法分析的更多相关文章
- 【转】向HTML中插入视频并兼容所有浏览器的方法
原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...
- 获取scrollTop兼容各浏览器的方法,以及body和documentElement
1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...
- 【转】获取scrollTop兼容各浏览器的方法,以及body和documentElement是啥?
1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...
- 兼容ie浏览器的方法
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,f ...
- JS兼容IE浏览器的方法
背景 系统需要兼容蛋疼的IE6... 解决方案 *{ 兼容IE6-8 }* <!--[if lt IE 9]> <script src="@{'/public/mng/ja ...
- 让bind函数支持IE8浏览器的方法
bind函数在IE8下是不支持的,只需要在你的js文件中加入如下代码就可以支持IE8 //让bind函数支持IE8 if (!Function.prototype.bind) { Function.p ...
- 兼容所有浏览器的CSS3圆角
兼容所有浏览器的CSS3圆角 解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待. ...
- Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
转载 http://www.cnblogs.com/jikey/archive/2012/08/31/2665880.html <!DOCTYPE html PUBLIC "-//W3 ...
- 使用text-align:justify,让内容两端对齐,兼容IE及主流浏览器的方法
如果不喜欢看分析过程,可以跳到最后看最终兼容方案 史前方法: 以前实现两端对齐是这样的: <p class="box1">密 码</p> <p cl ...
随机推荐
- Java - 数组JVM角度详解
http://developer.51cto.com/art/201001/176671.htm
- 浅谈白鹭Egret
浅谈白鹭Egret 最近在做一个移动项目,技术选型的时候接触到了白鹭,简单了解了之后觉得挺合适的,最终就选择了这个引擎. 为什么会选择白鹭引擎呢? 我看上他主要有一下几点: 1 ...
- 从项目中学习HTML+CSS
最近由于工作原因以及自己的懈怠,已经很久都没有更新过博客了.通过这段时间,我发现坚持一件事情是真的很难,都说万事开头难,但是在放弃这件事上好像开头了后面就顺理成章的继续下去了.中间即使不怎么情愿也在努 ...
- jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)
1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callba ...
- jQuery基础(工具函数,浏览器信息,检测节点,字符串,$.extend())
1.获取浏览器的名称与版本信息 在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息 如$.browser.chrome为true,表示当前为Chrome浏览器, $.bro ...
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- leetCode 题解之字符串中第一个不重复出现的字符
1.题目描述 Given a string, find the first non-repeating character in it and return it's index. If it doe ...
- innodb crash
今天上午同事处理了一个innodb crash 的问题,没有备份,如何恢复? 查看日志: 180928 8:42:44 InnoDB: Error: page 163855 log sequence ...
- Vue2学习笔记:v-model指令
1.v-model指令 <!DOCTYPE html> <html> <head> <title></title> <script s ...
- 在table中选中某条数据,让其显示对应详细信息
在第一个页面中使用 ccms.dialog.open({url:url+$(this).attr("code"),id:"dialogPic",width:10 ...