关于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最为特殊，并不取决于文档的渲染模式，而是取决于浏览器本身是否存在此属性。

各浏览器对上述代码兼容情况：

  1. IE6/7/8：没有doctype声明的html文档使用  document.body.scrollTop，否则使用document.documentElement.scrollTop。这些版本的浏览器中window.pageYOffset属性是undefined，因此无效。
  2. 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也没有早前那样特立独行了）。
  3. 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函数兼容各浏览器的方法分析的更多相关文章

  1. 【转】向HTML中插入视频并兼容所有浏览器的方法

    原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...

  2. 获取scrollTop兼容各浏览器的方法，以及body和documentElement

    1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...

  3. 【转】获取scrollTop兼容各浏览器的方法，以及body和documentElement是啥？

    1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 : 对于有do ...

  4. 兼容ie浏览器的方法

    让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法   最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,f ...

  5. JS兼容IE浏览器的方法

    背景 系统需要兼容蛋疼的IE6... 解决方案 *{ 兼容IE6-8 }* <!--[if lt IE 9]> <script src="@{'/public/mng/ja ...

  6. 让bind函数支持IE8浏览器的方法

    bind函数在IE8下是不支持的,只需要在你的js文件中加入如下代码就可以支持IE8 //让bind函数支持IE8 if (!Function.prototype.bind) { Function.p ...

  7. 兼容所有浏览器的CSS3圆角

    兼容所有浏览器的CSS3圆角      解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待. ...

  8. Css:背景色透明，内容不透明之终极方法！兼容所有浏览器

    转载 http://www.cnblogs.com/jikey/archive/2012/08/31/2665880.html <!DOCTYPE html PUBLIC "-//W3 ...

  9. 使用text-align:justify，让内容两端对齐，兼容IE及主流浏览器的方法

    如果不喜欢看分析过程,可以跳到最后看最终兼容方案 史前方法: 以前实现两端对齐是这样的: <p class="box1">密  码</p> <p cl ...

随机推荐

  1. POJ 2773 Happy 2006------欧几里得 or 欧拉函数。

    Happy 2006 Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 8359   Accepted: 2737 Descri ...

  2. Linux安装jdk，编写helloworld程序

    今天学习了Linux安装jdk,做个笔记记录一下. 第一步,确定Linux是32位的还是64位的,然后到oracle官网上下载对应版本的jdk,一般下载.tar.gz文件.查看Linux的版本的命令是 ...

  3. Data Encryption Errors After Restoring Microsoft Dynamics CRM Database

    If you’re seeing an error similar to the one above, you’ve probably done a database backup and resto ...

  4. 云数据库Redis版256M双机热备款

    云数据库Redis版是兼容Redis协议标准的.提供持久化的缓存式数据库服务,基于高可靠双机热备架构:全新推出的256M小规格款,适用于高QPS.小数据量业务,并支持免费全量迁移,完美服务于个人开发者 ...

  5. 计算机二进制表示、cpu架构(x86_64)、cpu频率、核心、主板

    计算机二进制表示 色彩二进制表示: 红色 255,0,0绿色 0,255,0蓝色 0,0,255 文字二进制表示:A 65a 97 cpu架构 cpu架构有精简指令集和复杂指令集两种精简指令集cpu有 ...

  6. 1java异常详解

    语法错误.编译时错误语义错误.逻辑错误.运行时错误 数组下标越界,c,c++不检查,需要程序员控制. 1.注意:这里说的异常是运行期错误,不包括编译期错误. 2.try尝试运行,catch捕获并处理, ...

  7. maven打包 springBoot 工程时，默认识别resources目录，习惯使用 resource 目录的需要手动指定静态资源目录

    最近项目开发,发现springBoot项目在使用maven打包时,我们静态资源文件都放在resource目录下面,大致如下: 在使用maven打包时,发现静态资源没有打进去.原来springBoot默 ...

  8. 如何使用CSS进行网页布局（HTML/CSS）

    什么叫做布局? 又称为版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 题目:假设高度已知,请写出三栏布局,其中左栏和右栏宽度各为300px,中间自适应 1.浮动布局 <!DOCT ...

  9. C#获取文件路径的几种方法

    //获取启动了应用程序的可执行文件的路径,不包括可执行文件的名称. string str5=Application.StartupPath;//可获得当前执行的exe的文件名. string str1 ...

  10. Python学习---JSON补充内容[中文编码 + dumps解析]

    JSON补充内容[微信解决中文乱码,接上] import json # 英文显示 dic = {"hello": "world"} str = json.dum ...