包含js中offsetTop的词条
请教一个关于javascript中offsetTop和scrollTop的问题
1、当元素的父容器没有指定定位方式时，指元素与body元素之间的偏移距离；
2、当对父容器指定定位方式（如：position：relative；）时，则指元素与父容器之间的偏移距离；
所以，当没有指定定位方式时，代码中的colee2.offsetTop值已经是元素colee2与body元素之间的偏移距离了。当这部分代码置入页面上方top：0处时，自然没有问题。但是，如果插入到页面下方时，colee2.offsetTop值就已经不再是top：0了，自然就出现位移偏差了，以致滚动执行不正确！
解决办法：只需在colee的css样式中加入”position:absolute”即可。
即：
div id=”colee” style=”overflow:hidden;height:100px;width:200px;position:absolute;”
在Javascript中scrollTop和offsetTop两个属性都代表什么意思，谢谢
scrollTop是
Sets?or?retrieves?the?distance?between?the?top?of?the?object?and?the?topmost?portion?of?the?content?currently?visible?in?the?window.
offsetTop是
Retrieves?the?calculated?top?position?of?the?object?relative?to?the?layout?or?coordinate?parent,?as?specified?by?the?offsetParent?property.
scrollTop,?scrollLeft
返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候，例如，元素的?CSS?overflow?属性设置为?auto?的时候，这些像素才有用。这些属性也只在文档的?body?或?html?标记上定义（这和浏览器有关），并且一起来制定滚动文档的位置。注意，这些属性并不会指定一个?iframe?标记的滚动量。这是非标准的但却得到很好支持的属性。
offsetTop
返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。
具体可以看下面这幅图
js的offsetTop到底是距离父元素的距离还是距离body的距离，或者是屏幕顶端的距离啊？好混乱
屏幕顶端的距离
网页被卷起来的高度/宽度（即浏览器滚动条滚动后隐藏的页面内容高度）
(javascript) document.documentElement.scrollTop //firefox
(javascript) document.documentElement.scrollLeft //firefox
(javascript) document.body.scrollTop //IE
(javascript) document.body.scrollLeft //IE
(jqurey) $(window).scrollTop()
(jqurey) $(window).scrollLeft()
网页工作区域的高度和宽度
(javascript) document.documentElement.clientHeight// IE firefox
(jqurey) $(window).height()
元素距离文档顶端和左边的偏移值
(javascript) DOM元素对象.offsetTop //IE firefox
(javascript) DOM元素对象.offsetLeft //IE firefox
(jqurey) jq对象.offset().top
(jqurey) jq对象.offset().left
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,若父级元素已经定位返回相对应父级对应元素。
javascript中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