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. SVM-支持向量机算法概述
			
    (一)SVM的背景简单介绍 支持向量机(Support Vector Machine)是Cortes和Vapnik于1995年首先提出的,它在解决小样本.非线性及高维模式识别中表现出很多特有的优势,并 ...
    
			
    2. 
						
  2. 《计算机问题求解》总结——2014年CCF计算机课程改革导教班（2014.07.11）
			
    一:引言     "心想事成".这是自己获得导教班学习机会的最佳概括.2013年年末学习李晓明老师的<人群与网络>课程:随后网络认识烟台大学贺利坚老师,了解到2013年 ...
    
			
    3. 
						
  3. Spring MVC 3.0 深入
			
    核心原理: . 用户发送请求给服务器.url:user.do . 服务器收到请求.发现DispatchServlet可以处理.于是调用DispatchServlet. . DispatchServle ...
    
			
    4. 
						
  4. FlatUI博皮制作
			
    Bootstrap3出来了,抛开内部框架结构和css命名的变化,bs3最大的改变莫过于扁平化. 扁平化UI中的典范,除了Metro,就是Flat了.目前本人FlatUI中毒中,于是开始慢慢的开始将博皮 ...
    
			
    5. 
						
  5. Laravel 5.1使用命令行模式(artisan)运行php脚本
			
    Laravel有内置命令调度器,可以方便的实现Cron. 任务调度定义在app/Console/Kernel.php文件的schedule方法中,该方法已经包含了一个示例.Laravel里有两种方法执 ...
    
			
    6. 
						
  6. 代码片段---S3C2440按键中断驱动程序的设计
			
    用到的知识: 中断  等待队列  睡眠  select  poll  misc http://pan.baidu.com/s/1bneSG5h
    
			
    7. 
						
  7. tachyon 集群容错
			
    集群容错就是HA.这次顺带也练一下hadoop的HA 环境: centos6.5+jdk1.7+hadoop2.2.0+tachyon0.5.0+zookeeper3.4.6 hadoop 192.1 ...
    
			
    8. 
						
  8. [Java] 内部类总结
			
    内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和缺省的包访问权 ...
    
			
    9. 
						
  9. Oracle基础 （十一）字符串函数
			
    一.字符串函数 LENGTH(char1,char2) SELECT LENGTH('abc def gh') FROM dual; --获取字符串的长度,包含空格 结果: CONCAT(char1, ...
    
			
    10. 
						
  10. XMLObject 简易xml格式接口数据生成和解析工具
			
    简单的请求封装,相当于封装了Book对象,但比Book对象参数更灵活 XMLObject xml = new XMLObject("book");xml.add("aut ...
    
			
    11.