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. 【虚拟化实战】存储设计之六latency
			
    在[虚拟化实战]存储设计之五IOPS中我们讲了评估存储性能的三个关键指标.也就是Throughput,IOPs和latency.以及三者之间的关系.本文深入介绍Latency过高的原因和一些建议. L ...
    
			
    2. 
						
  2. 【转】Delphi多线程学习（9）：多线程数据库查询（ADO）
			
    原文:http://www.cnblogs.com/djcsch2001/articles/2382559.html ADO多线程数据库查询通常会出现3个问题: 1.CoInitialize 没有调用 ...
    
			
    3. 
						
  3. Java IO和Java NIO在文件拷贝上的性能差异分析
			
    1.  在JAVA传统的IO系统中,读取磁盘文件数据的过程如下: 以FileInputStream类为例,该类有一个read(byte b[])方法,byte b[]是我们要存储读取到用户空间的缓冲区 ...
    
			
    4. 
						
  4. js 参数的 引用与值传递
			
    js中arr的赋值不影响原数组,赋值和引用的区别 1.赋值 var a = 1; var b = a;   //赋的是a的复制值 b ++; alert(a);   //"1"   ...
    
			
    5. 
						
  5. Android自定义窗口动画
			
    第一步,设置出现和消失的xml 1.在res/anim下创建enter_anim.xml,设置窗口出现的动画 <?xml version="1.0" encoding=&qu ...
    
			
    6. 
						
  6. Android（java）学习笔记264：Android下的属性动画高级用法（Property Animation）
			
    1. 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画 ...
    
			
    7. 
						
  7. 通用权限管理系统接口文档V4.2 版本之消息接口介绍
			
    通用权限管理系统提供的消息接口可实现消息获取,消息发送,底层使用Redis对消息进行缓存,解决消息的并发请求对数据库的压力. 前端可以通过客户端轮询来获取最新消息,前端效果截图如下:
    
			
    8. 
						
  8. Handsontable 学习笔记-Methods
			
    Handson: 亲自实践 先给出数据源和基本配置: var data =[ ["A1","B1","C1","D1"] ...
    
			
    9. 
						
  9. 【Android 界面效果44】Android之圆头像实例
			
    在很多应用中,我们看到,个人主页里面的头像一般都是圆的,设计成圆的会使整个界 面布 局变的优雅漂亮.那么,怎么使头像变圆呢?有的人说可以在上面加一个中间为透明圆形的png图,用它来遮盖住头像不就行了嘛 ...
    
			
    10. 
						
  10. 实用技术——Eclipse 常用快捷键
			
    Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率. 和编辑相关的快捷键 Eclipse中有如下一些和编辑相关的快捷键.  1. [ALT+/]  此快捷键为用户编 ...
    
			
    11.