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.
绝对定位的元素会计算错误.