offsettop(offsettop和scrolltop的区别)
jsz中scrollTop,clientTop,offsetTop
先来一张名气很大的图
看着实在是好晕，于是各种整理后手动画了一个：
发现主要分为几部分：
当定位时，position的移动的距离，
scrollHeight:文档总高度，可滚动总高度（包含元素本身，内外边距，边框）
scrollWidth:文档总宽度，可滚动总宽度（包含元素本身，内外边距，边框）
scrollTop:相对于滚动条顶部的偏移，指滚动条顶端与当前滚动条位置的距离
scrollLeft:相当于滚动与左端的偏移
clientHeight:可视区域高度（不包含边框，滚动条）
clientWidth:可视区域宽度
clientTop:内容区域相对于整个元素的左上角，当有边距时为边距的厚度，无边距时可以为0
clientLeft:内容区域相对于整个区域的左上角，有边距时为边距的宽度，可以为0
offsetHeight:获取自身元素（包含边距，滚动条）
offsetWidth:获取自身元素（包含边距，滚动条）
offsetTop:相对于最近定位祖元素的偏移，（祖元素必须是position,relative,absloute,fixed）
offsetLeft:同offsetTop
返回第一个祖定位元素，若父级元素无定位返回body,若父级元素已经定位返回相对应父级对应元素。
解决获取offsetParent为null,offsetTop为0的问题
如果获取该元素的offsetParent为null,一般就两种情况:
如果 offsetTop 为0，那么大概率也是因为上面两种原因造成的
每次获取 offsetTop 为0，找半天问题，最后都定位了该元素的父级元素或者祖先元素为 display:none ,所以这次记录下来，避免下次再出现这种问题
scrollTop和offsetTop的区别
scrollTop是指某个可滚动区块向下滚动的距离，比如向下滚动了10个像素，那么这个元素的scrollTop属性值就是10；
offsetTop则是元素的上边框与父元素的上边框的绝对距离。
两者描述的不是同一个东西，所以没有可比性。
html中的offsetTop的使用
1. offsetTop ：元素到offsetParent顶部的距离
2. offsetParent ：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。
3. 注意：只有元素show（渲染完成）才会计算入offsetTop，若是中间有元素数据需要异步获取，会导致最终获取的offsetTop值偏小
scrollTop与offsetTop有什么区别？
scrollTop是指某个可滚动区块向下滚动的距离，offsetTop则是元素的上边框与父元素的上边框的绝对距离。
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
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
8.测试offsetTop和scrollTop的html代码
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTML
HEAD
TITLE New Document /TITLE
SCRIPT LANGUAGE="JavaScript"
!--
function test(){
var oIframe = document.getElementById("div1");
alert(oIframe.offsetTop);
alert(oIframe.scrollTop);
}
//--
/SCRIPT
/HEAD
BODY style="border:1px red solid;padding:20px;margin:0px;"
div id="div1" style="border:1px blue solid;height:400px;width:200px;overflow:auto"
iframe id="iframe1" src="" width="400" height="500" style="border:1px red solid;" scrolling="no"
/iframe
/div
input type="button" value="OK" onclick="test()"/
/BODY
/HTML
script type="text/javascript" /script
offsetTop和scrollTop的区别
1、
1）element.scrollTop 返回该元素当前垂直滚动的距离，比如100（无单位）
2）element.scrollTop = 100 将该元素垂直滚动的距离设置为100，注意100为绝对值，而不是相对值。比如当前元素垂直滚动距离 element.scrollTop = 200，则设置完后，该元素垂直滚动的距离为100，而不是100+200
2、offsetTop：
返回该元素相对于其offsetParent顶部的距离，至于offsetParent，指的是距离该元素最近的定位元素，如下所示
div id="p"a span id="c"/span /a/div， P为C的offsetParent，offsetTop则为C距离P顶部的距离