9-21 网页卷去的距离与偏移量
本节编程练习不计算学习进度，请电脑登录imooc.com操作

网页卷去的距离与偏移量

我们先来看看下面的图：

scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

注意:

1. 区分大小写

2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

任务

在右边编辑器中，调整横竖滚动条后，点击按钮后，查看offsetTop、offsetLeft、scrollTop、scrollLeft值的变化。

index.html 
  1. <!DOCTYPE HTML>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <script type="text/javascript">
  5.     function req(){
  6.           var div = document.getElementById("div1");
  7.           document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
  8.           document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
  9.           document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
  10.           document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
  11.      }
  12. </script>
  13. </head>
  14. <body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">
  15.     <div style="width:60%;border-right:1px dashed red;float:left;">
  16.         <div style="float:left;">
  17.             <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">
  18.                 <div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
  19.             </div>
  20.             <input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>
  21.         </div>
  22.  
  23.     </div>
  24.     <div style="width:30%;float:left;">
  25.         <ul style="list-style-type: none; line-height:30px;">结果：
  26.             <li>offsetTop : <span id="li1"></span></li>
  27.             <li>offsetLeft : <span id="li2"></span></li>
  28.             <li> scrollTop : <span id="li3"></span></li>
  29.             <li>scrollLeft : <span id="li4"></span></li>
  30.         </ul>
  31.  
  32.     </div>
  33.     <div style="clear:both;"></div>    
  34. </body>
  35. </html>
下一节