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>

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

你可能感兴趣的:(set)