1.offsetTop     :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft    :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth   :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight :
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

5.offsetParent  :
当前对象的上级层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．

6.scrollLeft    :
对象的最左边到对象在当前窗口显示的范围内的左边的距离．
即是在出现了横向滚动条的情况下，滚动条拉动的距离．

7.scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
即是在出现了纵向滚动条的情况下，滚动条拉动的距离．

【代码】测试offsetTop和scrollTop的html代码

<html>

<head>

<meta content="text/html;charset=utf-8" http-equiv="content-type"/>
<script type="text/javascript">

    function test1(){

          var div = document.getElementById("div1");

          document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离

          document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离

          document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离

          document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离

     }

      function test2(){

          var div = document.getElementById("div2");

          document.getElementById("li5").innerHTML = (div.offsetTop)+"px";//div2距离屏幕顶部的距离

          document.getElementById("li6").innerHTML = (div.offsetLeft)+"px";//div2距离屏幕左部的距离

          document.getElementById("li7").innerHTML = (div.scrollTop)+"px";//div2纵向滚动条滚动的距离

          document.getElementById("li8").innerHTML = (div.scrollLeft)+"px";//div2横向滚动条滚动的距离

     }

     function test3(){

          var div = document.getElementById("div3");

          document.getElementById("li9").innerHTML = (div.offsetTop)+"px";//div3距离屏幕顶部的距离

          document.getElementById("li10").innerHTML = (div.offsetLeft)+"px";//div3距离屏幕左部的距离

          document.getElementById("li11").innerHTML = (div.scrollTop)+"px";//div3纵向滚动条滚动的距离

          document.getElementById("li12").innerHTML = (div.scrollLeft)+"px";//div3横向滚动条滚动的距离

     }

</script>


</head>

<body style="border: 10px solid red;padding:0px 0px;margin:5px 10px">

    <div>

    <DIV style="width:70%;border-right:1px dashed red;float:left;">

        <div style="float:left;">

            <div id="div1" style="border:5px blue solid;height:400px;width:200px;overflow:auto">

                <div style="height: 500px;width:400px">this is test!</div>

            </div>

            <input type="button" value="CLICK 1" onclick="test1()" style="border: 1px solid purple;height: 25px;"/>

        </div>

        <div>

            <div id="div2" style="border:5px solid yellow;height:400px;width:200px;overflow:auto">

                <div style="height: 500px;width:400px">this is test!</div>

            </div>

            <input type="button" value="CLICK 2" onclick="test2()"style="border: 1px solid purple;height: 25px;"/>

        </div>

        <div style="clear: both;">

            <div id="div3" style="border:5px solid #0080C0;height:400px;width:200px;overflow:auto;clear:both;">

                <div style="height: 500px;width:400px">this is test!</div>

            </div>

            <input type="button" value="CLICK 3" onclick="test3()"style="border: 1px solid purple;height: 25px;"/>

        </div>

    </DIV>

    <DIV style="width: 20%;float:right;margin-right:100px">

        <ul>click1结果：

            <li id="li1"></li>

            <li id="li2"></li>

            <li id="li3"></li>

            <li id="li4"></li>

        </ul>

        <ul>click2结果：

            <li id="li5"></li>

            <li id="li6"></li>

            <li id="li7"></li>

            <li id="li8"></li>

        </ul>

        <ul>click3结果：

            <li id="li9"></li>

            <li id="li10"></li>

            <li id="li11"></li>

            <li id="li12"></li>

        </ul>

    </DIV>

    </div>

</body>

</html>




上面就是自己测试用的代码，可以直接拿来测试。
												


											
js中的scroll和offset 的使用比较的更多相关文章
	

    
								
  1. 了解Js中的client，offset
		
    Client clientWidth,clientHeight 元素内部的宽度和高度,clientTop,clientLeft 元素内边距到其边框的距离,clientX,clientY相当于浏览器窗口 ...
    
		
    2. 
						
  2. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
		
    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
    
		
    3. 
						
  3. python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)
		
    04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
    
		
    4. 
						
  4. javascript中常用坐标属性offset、scroll、client
		
    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解.  ...
    
		
    5. 
						
  5. js中对象的一些特性，JSON，scroll家族
		
    一.js中对象的一些特性 对象的动态特性 1.当对象有这个属性时,会对属性的值重写 2.当对象没有这个属性时,会为对象创建一个新属性,并赋值 获得对象的属性的方式 为元素设置DOM0级事件 二.JSO ...
    
		
    6. 
						
  6. js中scroll滚动相关
		
    js中scroll滚动相关 scroll,滚动,一般讨论的是网页整体与浏览器之间的关系. 一.元素相关 属性/方法 解释 element.scrollHeight 返回元素的整体高度. element ...
    
		
    7. 
						
  7. JS中各种宽度距离小结
		
    js中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词解释 screen:屏幕.这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该 ...
    
		
    8. 
						
  8. js中的offsetLeft和style.left
		
    (1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字 ...
    
		
    9. 
						
  9. JavaScript基础（3）-JS中的面向对象、定时器、BOM、位置信息
		
    一.创建对象的几种常用方式. 1.使用Object或对象字面量创建对象: a.使用Object()内置的构造函数来创建对象,例如: var student = new Object(); // 创建一 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ChRoomtst
			
    https://github.com/JawaJedi/ChRoomtst
    
			
    2. 
						
  2. 在XAF应用程序使用现有的数据库？
			
    https://documentation.devexpress.com/#Xaf/CustomDocument3061
    
			
    3. 
						
  3. UVA11038- How Many O&#39;s?(组合数学)
			
    题目链接 题意:求出在a到b之间的数中,有多少个0. 思路:组合数学问题.能够枚举每一个位置上的数i,如果i之前的数为left,后面的为right,后面有num位数.当i != 0时,将i置为0,所以 ...
    
			
    4. 
						
  4. 第十二天--Property List和NSUserDefaults
			
    转自:http://appleparty.diandian.com/post/2012-05-24/9098104219 Property List  (属性表) 定义:Property List文件 ...
    
			
    5. 
						
  5. P、NP、NP-Complete、NP-hard问题
			
    Table of Contents 1 遇到难题怎么办? 2 什么是P.NP.NP-Complete和NP-hard 3 P = NP ???? 4 参考 1 遇到难题怎么办? 遇到一个问题,通常我们 ...
    
			
    6. 
						
  6. 海量数据处理算法—Bit-Map
			
    原文:http://blog.csdn.net/hguisu/article/details/7880288 1. Bit Map算法简介 来自于<编程珠玑>.所谓的Bit-map就是用一 ...
    
			
    7. 
						
  7. c++ 设计模式7 （Bridge 桥模式）
			
    4.2 Bridge 桥模式 动机: 由于某些类型的固有的实现逻辑,使得它们具有两个变化的维度,乃至多个变化的维度. 代码示例: 实现一个Messager,含有基本功能PlaySound,Connec ...
    
			
    8. 
						
  8. [xPlugins] 开发中常用富文本编辑器介绍
			
    富文本编辑器学习,常见富文本编辑器有: CKeditor(FCkeditor).UEditor(百度推出的).NicEdit.KindEditor CKEditor 即 FCKEditor FCKed ...
    
			
    9. 
						
  9. 明风：分布式图计算的平台Spark GraphX  在淘宝的实践
			
    快刀初试:Spark GraphX在淘宝的实践 作者:明风 (本文由团队中梧苇和我一起撰写,并由团队中的林岳,岩岫,世仪等多人Review,发表于程序员的8月刊,由于篇幅原因,略作删减,本文为完整版) ...
    
			
    10. 
						
  10. TFS 2010 使用手册（四）备份与恢复
			
    本文参考了http://developer.51cto.com/art/201010/229066.htm的文章. TFS的备份与恢复一直没有很完整的解决方案,要完成一个很好的备份要有很多的手动步骤才 ...
    
			
    11.