- scrollTop 滚动条相对于其顶部的偏移
- offsetTop 返回当前元素上边缘距离offsetParent元素的距离,返回值是数字,单位是像素。
- offsetHeight 返回当前元素的高度,包括内边距和边框
- event.clientX,event.clientY 相对于浏览器窗口的(x,,y)坐标,不包括工具栏和滚动条
- event.pageX, event.pageY 相对于文档的(x,,y)坐标
offsetParent 元素是最近的采用定位(position属性值为fixed、relative或者absolute)祖先元素,如果没有采用定位的话,返回body元素
.panel{
position: absolute;
top: 50px;
left: 50px;
}
$(function(){
var offsetTop1 = document.getElementById("panel").offsetTop;
// 列表的高度是90px
var offsetTop2 = document.getElementById("list_2").offsetTop;
// 50 90
console.log(offsetTop1,offsetTop2);
})
<div class="panel" id="panel">
<a href="javascript:void(0);" class="media-box media-msg" id="list_1">
<div class="box-media-box__hd">
<span class="fa fa-caret-square-o-left"></span>
</div>
<div class="box-media-box__bd">
<div class="media-box__title">heh</div>
<p class="media-box__desc">由各种物质组成的巨型球状天体,行轨道。</p>
</div>
</a>
<a href="javascript:void(0);" class="media-box media-msg" id="list_2">
<div class="box-media-box__hd">
<span class="fa fa-caret-square-o-left"></span>
</div>
<div class="box-media-box__bd">
<div class="media-box__title">heh</div>
<p class="media-box__desc">由各种物质组成的巨型球有自己的运行轨道。</p>
</div>
</a>
</div>