offsetTop测试见解

offsetTop一开始以为只要容器内div的top定位为负就行，结果今天刚做了个demo，发现好像不是那么回事，于是经过各种测试，得出了一些结论，结论看demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
<style>
#aa{width:200px;height:200px;overflow:hidden;float:left;border:2px solid #00f;}
#bb{width:200px;height:200px;float:left;margin-left:100px;border:2px solid #00f;}
#cc{width:200px;height:200px;float:left;margin-left:100px;border:2px solid #00f;position:relative;}
#aaa, #bbb{width:200px;height:500px;background:red;}
#ccc{width:200px;height:500px;background:red;position:absolute;top:-200px;}
</style>
</head>
<body>
<div id="aa">
    <div id="aaa">
        1 <br />
        2 <br />
        3 <br />
        4 <br />
        5 <br />
        6 <br />
        7 <br />
        8 <br />
        9 <br />
        10 <br />
        11 <br />
        12 <br />
        我是aaa
    </div>
</div>
<div id="bb">
    <div id="bbb">
        1 <br />
        2 <br />
        3 <br />
        4 <br />
        5 <br />
        6 <br />
        7 <br />
        8 <br />
        9 <br />
        10 <br />
        11 <br />
        12 <br />
        我是bbb
    </div>
</div>
<div id="cc">
    <div id="ccc">
        1 <br />
        2 <br />
        3 <br />
        4 <br />
        5 <br />
        6 <br />
        7 <br />
        8 <br />
        9 <br />
        10 <br />
        11 <br />
        12 <br />
        我是ccc
    </div>
</div>
<input type="button" value="看看ccc的scrollTop" onclick="ccc()" />
</body>
<script>
window.onload = function ()
{
    var oDiv = document.getElementById("aa");
    var oDiv2 = document.getElementById("bb");

    oDiv.scrollTop = 100;
    oDiv2.scrollTop = 100;
}
function ccc()
{
    var oDiv = document.getElementById("ccc");
    alert(oDiv.scrollTop);
}
</script>
</html>

事实证明，实验才出真理啊，老看书面上的木有用，理解不了它的实际意义

posted @ 2013-05-06 22:24  金帛  阅读(222)  评论(0)  编辑  收藏  举报