一、先遇到document.body.scrollTop值为0的问题

做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样,

window.onscroll=function () {
var oId=document.getElementByIdx_x("id");
oId.style.top=document.body.scrollTop+"px";
}

可是怎么没有达到预期效果呢,输出document.body.scrollTop的值一看,一直都是0.原来是DTD的问题,要是页面直接用开头的话就没有问题了.但是要符合web标准,DTD当然是不能少的.使用DTD时用document.documentElement.scrollTop代替document.body.scrollTop就可以了

window.onscroll=function () {
var oId=document.getElementByIdx_x("id");
oId.style.top=document.documentElement.scrollTop+"px";
}

或者用函数来解决:

function get_scrollTop_of_body() {
var scrollTop;
if (typeof window.pageYOffset != 'undefined') { //pageYOffset指的是滚动条顶部到网页顶部的距离
scrollTop = window.pageYOffset;
} else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
scrollTop = document.documentElement.scrollTop;
} else if (typeof document.body != 'undefined') {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}

注:IE对盒模型的渲染在 Standards ModeQuirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。

document.compatMode正好派上用场,它有两种可能的返回值:BackCompatCSS1Compat,对其解释如下:

BackCompat: Standards-compliant mode is not switched on. (Quirks Mode)

CSS1Compat: Standards-compliant mode is switched on. (Standards Mode)

在实际的项目中,我们还需要在获取浏览是否IE,这样就可以得到IE的渲染模式了。

当文档有了标准声明时, document.compatMode 的值就等于 "CSS1compat", 因此,我们可以根据 document.compatMode 的值来判断文档是否加了标准声明:

var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;

二、再次遇到谷歌浏览器不支持document.documentElement.scrollTop,值0的问题

信息显示浮动层时,IE、Firefox下都能显示正常,但Chrome下出现了浮动层永远显示在上面,经过仔细分析,发现Chrome对document.documentElement.scrollTop的识别会出现误差。不过加上document.body.scrollTop后,则显示正常。

  由于document.documentElement.scrollTop和document.body.scrollTop在标准模式或者是奇怪模式下都只有一个会返回有效的值,所以都加上也不会有问题(看来上面的问题是Chrome可能把文档当作非标准文档来解析了)。

  即获取高度时使用document.documentElement.scrollTop+document.body.scrollTop,经测试,代码在IE、Firefox、Chrome下都能显示正常了。

三、浏览器兼容模式

对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途。今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。

      document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat,对其解释如下:

BackCompat Standards-compliant mode is not switched on. (Quirks Mode)

CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

    在实际的项目中,我们还需要在获取浏览是否IE,这样就可以得到IE的渲染模式了。在Ext中的代码:isBorderBox=isIE&&!isStrict。

当文档有了标准声明时, document.compatMode 的值就等于 "CSS1compat", 因此, 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明

var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;


==========================模式应用===========================

document.compatMode:获取当前浏览器采用的渲染方式。

主要是浏览器的模式,有两个:BackCompat,CSS1Compat。其中前者是怪异模式,后者是标准模式。

IE默认是BackCompat模式,Gecko内核的浏览器只在table中图片层上不同,可以看为CSS1Compat标准模式

document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;

当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。

浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。

一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码:

if (document.compatMode == \"BackCompat\") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == \"CSS1Compat\"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}

http://blog.csdn.net/gongyuan303/article/details/8935307

火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题的更多相关文章

  1. js中的document.body.scrollTop与document.documentElement.scrollTop

    获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop获取当前页面滚动条横坐标的位置:document.b ...

  2. 关于document.body.scrollTop与documentElement.scrollTop

    遇到document.body.scrollTop值为0的问题 今天在写一个小demo的时候,使用滚动条,我用document.body.scrollTop获取滚动条的位置,但是很奇怪的发现在谷歌上获 ...

  3. document.documentElement.scrollTop || document.body.scrollTop

    如果有doctype的声明,需要用document.documentElement.scrollTop没有doctype的声明,用document.body.scrollTop

  4. document.body.scrollTop or document.documentElement.scrollTop

      用Javascript获取DOM节点相对于页面的绝对坐标时,需要计算当前页面的滚动距离,而这个值的获取又取决于浏览器. 在Firefox或Chrome浏览器的控制台可以查看document.bod ...

  5. document.body.scrollTop vs document.documentElement.scrollTop

    window.addEventListener("scroll", function () { if (document.body.scrollTop >= window.i ...

  6. document.body.scrollTop vs document.documentElement.scrollTop && document.body.scrollHeight vs document.documentElement.scrollHeight

    FireFox下 document.body.scrollHeight || document.documentElement.scrollHeight;//等价 document.body.scro ...

  7. document.body.scrollTop与document.documentElement.scrollTop兼容

    这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop! 看前辈们的文章,纷纷表示如果有文档声 ...

  8. document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    转自http://wo13145219.iteye.com/blog/2001598 一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取do ...

  9. document.documentElement.scrollTop(获取滚动条位置)

    要获取当前页面的滚动条纵坐标位置,用:document.documentElement.scrollTop;而不是:document.body.scrollTop;documentElement 对应 ...

随机推荐

  1. ACM: Gym 101047M Removing coins in Kem Kadrãn - 暴力

     Gym 101047M Removing coins in Kem Kadrãn Time Limit:2000MS     Memory Limit:65536KB     64bit IO Fo ...

  2. echo.js 延迟加载图片控件

    echo.js的github地址:https://github.com/toddmotto/echo   echo是一个独立的JavaScript.轻量级的.延迟图片加载插件,echo压缩后体积不到1 ...

  3. 关于scale和zoom的区别

    其实关于scale,我之前是用他来搞一些css3的特效的放大缩小啊,玩的也挺6666,而*zoom:1之前是用来做css的hack,也就是触发IE6/7的haslayout清除浮动的.终于某天,好事的 ...

  4. libCURL开源库在VS2010环境下编译安装,配置详解

    libCURL开源库在VS2010环境下编译安装,配置详解 转自:http://my.oschina.net/u/1420791/blog/198247 http://blog.csdn.net/su ...

  5. [WPF] 我的WPF自学日记1,无标题窗体拖动

    学习WPF的第一天,尝试写比较常用的功能,无标题窗体拖动. 先在设计界面给它加上MouseDown事件 <Window x:Class="MyFirstWPFAPP.MainWindo ...

  6. win7 x64 vs2010 directShow开发环境配置

    近来工作需要,要用dirrectShow写一个视频播放的demo验证自己的想法.开发环境配置了好久都没有成功,最后终于弄完,现在记录下来,以后有同学遇到同样问题,可以以此法解决. windows SD ...

  7. webpack模块加载css文件及图片地址

    webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...

  8. linux开启FTP以及添加用户配置权限,只允许访问自身目录,不能跳转根目录

    1.切换到root用户 2.查看是否安装vsftp,我这个是已经安装的. [root@localhost vsftpd]# rpm -qa |grep vsftpd vsftpd--.el7_2.x8 ...

  9. CF2.E

    E. Comments time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  10. 9.30notes

    memcached   缓存机制,减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度. array_slice(data['list'],0,10) ...