getBoundingClientRect()方法
原来只知道是获取元素的位置信息的，今天测试了一个功能，发现不是这么简单，见例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
#null {
height:1300px;
}
#bottom {
background:lightblue;
height:100px;
}
</style>
</head>
<body>
<div id='null'>空白区</div>
<div id="bottom">
最下面的部分
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var bottom = document.getElementById('bottom');
p('元素y坐标: ' + get(bottom, 'top'));
}
function get(el, name){
var box = el.getBoundingClientRect(),
html = document.documentElement,
body = document.body,
scrollTop = html.scrollTop || body.scrollTop,
scrollLeft = html.scrollLeft || body.scrollLeft,
clientTop = html.clientTop || body.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft || 0,
top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
p('top: ' + box.top)
p('scrollTop: ' + scrollTop)
p('clientTop:' + clientTop)
return name === 'top' ? top : left;
}
function p(s){
console.log(s)
}
</script>
</html>
如果滚到条在最上边，即没拉动过滚动条，打印：
top: 1308
scrollTop: 0
clientTop:0
元素y坐标: 1308
如果滚动条在中间，打印：
top: 831
scrollTop: 477
clientTop:0
元素y坐标: 1308
如果滚动条在最下面，打印：
top: 298
scrollTop: 1010
clientTop:0
元素y坐标: 1308
可以看到top和scrollTop的值是不同的
没拉过滚动条时，元素还在最下面，top值很大
拉过滚动条时，元素在慢慢接近中，top值在减小，scrollTop值在增加
总结：getBoundingClientRect().top用于获取元素到文档可视区域顶部的距离，其他值同理
但这个方法不是完美的，至少有以下bug
Handling table border offsets.
Fixed positioned elements.
Scroll offsets within another element.
Borders of overflowed parent elements.
绝对定位的元素会计算错误.
浙公网安备 33010602011771号