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. 浅析SkipList跳跃表原理及代码实现
			
    本文将总结一种数据结构:跳跃表.前半部分跳跃表性质和操作的介绍直接摘自<让算法的效率跳起来--浅谈“跳跃表”的相关操作及其应用>上海市华东师范大学第二附属中学 魏冉.之后将附上跳跃表的源代 ...
    
			
    2. 
						
  2. 一款纯css3实现的条纹加载条
			
    之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...
    
			
    3. 
						
  3. 基于Docker服务的java Web服务搭建
			
    导读 最近想我们的应用需要更新维护,Android.IOS.还有服务器端都要更新,都在忙于写代码没有写文章了.我们的服务器是用java ssh架构的,到时也打算切换成Spring MVC+oauth2 ...
    
			
    4. 
						
  4. Laravel 5.1使用命令行模式(artisan)运行php脚本
			
    Laravel有内置命令调度器,可以方便的实现Cron. 任务调度定义在app/Console/Kernel.php文件的schedule方法中,该方法已经包含了一个示例.Laravel里有两种方法执 ...
    
			
    5. 
						
  5. Windows OpenVPN Client and tls-auth
			
    The official Windows OpenVPN client does not seem to work properly with the tls-auth option if a key ...
    
			
    6. 
						
  6. 【Android 界面效果20】Android GradientDrawable类的详解，设置activity的背景颜色渐变效果
			
    看到这个例子的标题RoundRects,我的第一感觉是介绍RoundRectShape, 打开例子看了代码却是使用GradientDrawable来实现的. GradientDrawable 支持使用 ...
    
			
    7. 
						
  7. 【Android 界面效果13】关于全屏和取消标题栏
			
    ------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 去掉标题栏: 第一种:也一般入门的时候经常使用的一种方法 requestWindowFeature(Wi ...
    
			
    8. 
						
  8. Android SQLite 的简单实例
			
    1.前言: 今天再一次去蹭了一下某老师的android课,这一次讲的是Android的SQLite的使用,老师当场讲解了他自己做的例子. 回来之后,我春心萌动,不得不拿着参考资料再做了一个类似的例子, ...
    
			
    9. 
						
  9. poj 3621 0/1分数规划求最优比率生成环
			
    思路:以val[u]-ans*edge[i].len最为边权,判断是否有正环存在,若有,那么就是ans小了.否则就是大了. 在spfa判环时,先将所有点进队列. #include<iostrea ...
    
			
    10. 
						
  10. some smart
			
    1.ca.laplanete.mobile.pageddragdropgridhttps://github.com/mrKlar/PagedDragDropGridPagedDragDropGrid  ...
    
			
    11.