Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • 标准模式下scrollTop

    post by onelong / 2010-10-17 6:31 Sunday [javascript]

    在文档<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">下,document.body.scrollTop一直都是0的,那么怎样获取滚动条当前的滚动位置呢?

    很简单,下面介绍一个符合标准的写法

    document.documentElement.scrollTop!!

    在看看例子吧!!!感性的认识一下这个两个写法在不同模式下的不同吧

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script>
        var d, str;
        window.onload = window.onscroll = function () {
           d = document.getElementById("d");
           str = "<strong>" + ((document.compatMode.toLowerCase().indexOf("back") >= 0) ? "Quirks" : "Standards") + "</strong><br />"
               + "document.documentElement.scrollTop:" + document.documentElement.scrollTop + "<br />"
               + "document.body.scrollTop:" + document.body.scrollTop;
           d.innerHTML = str;
        }
    </script>
    </head>
    <body style="font:12px Arial; _background-attachment:fixed; _background-image:url(about:blank);">
    <div style="height:10000px;"></div>
    <div id="d" style="position:fixed; top:0; left:0; _position:absolute; _top:expression(offsetParent.scrollTop); _left:expression(offsetParent.scrollLeft); background:#ddd;"></div>
    </body>

    </html>
     

    引用地址:
     

    我要评论