首页 > js/Jquery > document.body.scrollTop 的值总是等于 0 的解决方法;DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN 与 JS冲突

document.body.scrollTop 的值总是等于 0 的解决方法;DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN 与 JS冲突

做页面的时候可能会用到浮动层,读取 document.body.scrollTop 来设置层的位置,如以下代码,可以达到让一个ID为“Div1”的层一直居中显示的目的:

<script language=’javascript’>
function Sc()
{
document.getElementById(“Div1”).style.top=document.body.scrollTop+(document.body.clientHeight-document.getElementById(“Div1”).offsetHeight)/2
document.getElementById(“Div1”).style.left=document.body.scrollLeft+(document.body.clientWidth-document.getElementById(“Div1”).offsetWidth)/2;
}
window.onscroll=Sc;
window.onresize=Sc;
window.onload=Sc;
</script>

但是却发现总是有问题,很奇怪啊,以前明明用过的,没有问题,这次是怎么回事呢。
用排除法慢慢试了试,发现居然跟第一行有关系……

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

有这行就不起作用,没有的话就可以起作用了,不过去掉这行DTD声明后,很多以前的样式都变了,要是为此去改样式的话,实在太麻烦了,经过查询,发现,有了DTD声明之后,document.body.scrollTop 的值就会总是等于0,解决办法就是在有 DTD 时用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以正常使用了。
总结:

  • 页面具有 DTD(或指定了 DOCTYPE)时,使用 document.documentElement。
  • 页面不具有 DTD(或没有指定了 DOCTYPE)时,使用 document.body。
  • 在 IE 和 Firefox 中均是如此。
  • 为了兼容(不管有没有 DTD),可以使用如下代码:
  • var scrollTop = window.pageYOffset|| document.documentElement.scrollTop|| document.body.scrollTop|| 0;

    1. private student loan 1月 5th, 2011 @ 05:30 | #1

      This is such a great resource that you are providing and you give it away for free. I enjoy seeing websites that understand the value of providing a prime resource for free. I truly loved reading your post. Thanks!

    2. 灰狼 2月 16th, 2011 @ 17:07 | #2

      往下滚动的时候,漂浮会消失的吧

      • DigDeeply 2月 16th, 2011 @ 19:09 | #3

        不会消失的。

    3. 字型车 10月 16th, 2012 @ 13:35 | #4

      用了,还是没有输出都是0

    评论提交中, 请稍候...

    留言

    可以使用的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
    Trackbacks & Pingbacks ( 2 )
    1. 5月 24th, 2012 @ 00:55 | #1
      Pingback: JS与DOCTYPE冲突导致漂浮代码失效的解决方法 » Hedgehog
    2. 5月 24th, 2012 @ 01:03 | #2
      Pingback: 为什么document.body.scrollTop跟DOCTYPE冲突了 » Hedgehog