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. 【JavaScript】JavaScript Promise 探微
			
    http://www.html-js.com/article/Promise-translation-JavaScript-Promise-devil-details 原文链接:JavaScript  ...
    
			
    2. 
						
  2. 模块化JavaScript设计模式(一)
			
    在可扩展JavaScript的世界里,假设我们说一个应用程序是模块化(modular)的,那么通常意味着它是由一系列存储于模块中的高度解耦,不同的功能片段组成. 在可能的情况下.通过一处依赖性.松耦合 ...
    
			
    3. 
						
  3. centos 安装http协议的git server
			
    1.服务器端安装httpd,git,gitweb等 1 #yum install httpd git git-daemon  gitweb 2.服务器端初始化仓库 1 2 3 #mkdir -p /d ...
    
			
    4. 
						
  4. oracle之报错:ORA-00054: 资源正忙，要求指定 NOWAIT_数据库的几种锁
			
    问题如下: SQL> conn scott/tiger@vm_databaseConnected to Oracle Database 11g Enterprise Edition Releas ...
    
			
    5. 
						
  5. LMAX Disruptor – High Performance, Low Latency and Simple Too 转载
			
    原文地址:http://www.symphonious.net/2011/07/11/lmax-disruptor-high-performance-low-latency-and-simple-to ...
    
			
    6. 
						
  6. C#中的多态现象
			
    面向对象的特征封装.继承和多态.Polymorphism(多态性)来源于希腊单词,指“多种形态”.多态性的一个重要特征是方法的调用是在运行时确定而不是编译时.在.NET中用于实现多态性的关键词有vir ...
    
			
    7. 
						
  7. Python练习题 004：判断某日期是该年的第几天
			
    [Python练习题 004]输入某年某月某日,判断这一天是这一年的第几天? ---------------------------------------------- 这题竟然写了 28 行代码! ...
    
			
    8. 
						
  8. iOS  关于UIscrollView
			
    设置 滚动起始位置 [scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
    
			
    9. 
						
  9. 【Java/Android性能优2】Android性能调优工具TraceView介绍
			
    本文参考:http://www.trinea.cn/android/android-traceview/ Android自带的TraceView堪比java的性能调优工具visualvm线程视图,可以 ...
    
			
    10. 
						
  10. 写多个物件css3循环动画案例原理
			
    div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: ...
    
			
    11.