offsettop,js的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顶部的距离
scrollTop和offsetTop的区别
scrollTop是指某个可滚动区块向下滚动的距离，比如向下滚动了10个像素，那么这个元素的scrollTop属性值就是10；
offsetTop则是元素的上边框与父元素的上边框的绝对距离。
两者描述的不是同一个东西，所以没有可比性。
JAVASCRIPT中offsetTop和scrollTop的不同处
offsetTop是自身的y坐标.
scrollTop是滚动过的y长度.
如果没有滚动的空间的话,scrollTop是为0的,这个常运用在子对象高度大于父对象,然后子对象可以滚动显示,有时我们需要知道这个子对象究竟向下滚动了多长的距离,就用到子对象的scrollTop去求得,同样的,我们在使用无间隙向上或是向下滚动时也要用到这个的!
而offsetTop是自身的y坐标,所以不管你如何滚动都不会变化的!
html中的offsetTop的使用
1. offsetTop ：元素到offsetParent顶部的距离
2. offsetParent ：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。
3. 注意：只有元素show（渲染完成）才会计算入offsetTop，若是中间有元素数据需要异步获取，会导致最终获取的offsetTop值偏小
解决获取offsetParent为null,offsetTop为0的问题
如果获取该元素的offsetParent为null,一般就两种情况:
如果 offsetTop 为0，那么大概率也是因为上面两种原因造成的
每次获取 offsetTop 为0，找半天问题，最后都定位了该元素的父级元素或者祖先元素为 display:none ,所以这次记录下来，避免下次再出现这种问题