获取scrollTop兼容各浏览器的方法,以及body和documentElement是啥?

news/2024/7/19 13:07:09 标签: js

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;

DTD相关说明:

页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement。

页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body。

在 IE 和 Firefox 中均是如此。

为了兼容,不管有没有 DTD,可以使用如下代码:

var scrollTop = window.pageYOffset  //用于FF
                || document.documentElement.scrollTop  
                || document.body.scrollTop  
                || 0;

documentElement 和 body 相关说明:

body是DOM对象里的body子节点,即 <body> 标签;

documentElement 是整个节点树的根节点root,即<html> 标签;

DOM把层次中的每一个对象都称之为节点,就是一个层次结构,你可以理解为一个树形结构,就像我们的目录一样,一个根目录,根目录下有子目录,子目录下还有子目录。

以HTML超文本标记语言为例:整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点。而body是子节点,要访问到body标签,在脚本中应该写:document.body。

来源:

http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332076.html

http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html


http://www.niftyadmin.cn/n/736752.html

相关文章

IE10下设置了z-index,底层DIV绑定的事件仍然会触发

div加个透明背景background-color: rgba(0,0,0,0); css3 rgba 即在原本3原色的基础上增加了alpha(透明度)通道&#xff0c;该属性的兼容性如下&#xff1a; 类型 Internet Explorer Firefox Chrome Opera Safari版本 ()IE6 (√)Firefox 3.0.10 (√)Chrome 2.0.x (√)Opera 9.64…

vue的建立

1.建立assets&#xff0c;在其中建立css和js文件夹&#xff0c;把vue.js和vue.min.js拉入js文件夹中&#xff0c;因为assets文件夹不编译&#xff08;熟悉liunx系统的话&#xff0c;就知道不编译了&#xff09;。 2 建立一个和assets同级的写代码的文件夹 3.cnpm install -g li…

vue v-if和v-show的区别

v-if:是vue 的一个内部指令&#xff0c;指令用在我们的html中。 v-if用来判断是否加载html的DOM&#xff0c;比如我们模拟一个用户登录状态&#xff0c;在用户登录后现实用户名称。 v-show是调整css中display属性&#xff0c;DOM已经加载&#xff0c;只是CSS控制没有显示出来。…

跨域资源共享 CORS 详解( 阮一峰)

CORS是一个W3C标准&#xff0c;全称是"跨域资源共享"&#xff08;Cross-origin resource sharing&#xff09;。 它允许浏览器向跨源服务器&#xff0c;发出XMLHttpRequest请求&#xff0c;从而克服了AJAX只能同源使用的限制。 本文详细介绍CORS的内部机制。一、简介…

myeclipse 10 破解 激活,java编写,适用于装有java环境的各种操作系统,win,linux,maxos

第一步&#xff1a;输入任意用户名第二步&#xff1a;点击Systemid... 按钮&#xff0c;自动生成本机器的systemid。第三步&#xff1a; 点菜单Tools->RebuildKey第四步&#xff1a;点击active按钮.会在显示区域生成LICENSE_KEY ACTIVATION_CODE ACTIVATION_KEY这时候不要打…

HTML Button自动刷新页面的问题

一、问题<button class"am-btn am-btn-default am-btn-xs am-text-secondary" data-id"99" data-type1><span class"am-icon-pencil-square-o"></span>修改</button>1页面上有这样一个按钮&#xff0c;每次点击这个按钮…

[java]static关键字的四种用法和void的用法

void关键字表示函数没有返回结果&#xff0c;是java中的一个关键字。 Void作为函数的返回结果表示函数返回null(除了null不能返回其它类型)。 在java的关键字中&#xff0c;static和final是两个我们必须掌握的关键字。不同于其他关键字&#xff0c;他们都有多种用法&#xff0c…

MyEclipse快捷键大全

存盘 Ctrls(肯定知道) 注释代码 Ctrl/ 取消注释 Ctrl\(Eclipse3已经都合并到Ctrl/了) 代码辅助 Alt/ 快速修复 Ctrl1 代码格式化 CtrlShiftf 整理导入 CtrlShifto 切换窗口 Ctrlf6 <可改为ctrltab方便> ctrlshiftM 导入未引用的包 ctrlw 关闭单个窗口 F3 跳转到类、变量的…