最近做了很多获取元素位置的交互,最开始接触的是下面的这些,做了比如网页区域懒加载、一键回到网页顶部等。
为了理解这些属性,我们需要知道HTML元素的实际内容有可能比分配用来容纳内容的盒子更大,因此可能会出现滚动条,内容区域是视口,当实际内容比视口大的时候,需要把元素的滚动条位置考虑进去。
1. clientHeight和clientWidth用于描述元素内尺寸,是指 元素内容+内边距 大小,不包括边框(IE下实际包括)、外边距、滚动条部分
2. offsetHeight和offsetWidth用于描述元素外尺寸,是指 元素内容+内边距+边框,不包括外边距和滚动条部分
3. clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离,也就是左,上边框宽度
4. offsetTop和offsetLeft表示该元素的左上角(边框外边缘)与已定位的父容器(offsetParent对象)左上角的距离
5. offsetParent对象是指元素最近的定位(relative,absolute)祖先元素,递归上溯,如果没有祖先元素是定位的话,会返回null
6. scrollWidth和scrollHeight是元素的内容区域加上内边距加上溢出尺寸,当内容正好和内容区域匹配没有溢出时,这些属性与clientWidth和clientHeight相等
7. scrollLeft和scrollTop是指元素滚动条位置,它们是可写的。
直到将其应用到手机端rem时遇到了问题,因为在动态获取手机宽度时过慢,有时在显示出部分内容后才计算出来,导致了二次重绘,页面闪烁的问题。重新在网上寻找到如下答案,才完美解决这个问题。 有一种快速获得网页元素的位置。那就是使用getBoundingClientRect()方法。
所以,网页元素的相对位置就是
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
再加上滚动距离,就可以得到绝对位置
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
目前,IE、Firefox 3.0+、Opera 9.5+都支持该方法,而Firefox 2.x、Safari、Chrome、Konqueror不支持。
最后奉上rem自适应的代码:
<script type="text/javascript">
(function() {
var b = document.documentElement,
a = function() {
var a = b.getBoundingClientRect().width;
var a = a < 640 ? a : 640;
b.style.fontSize =( .0375 * a) + "px";
},
c = null;
window.addEventListener("resize",
function() {
clearTimeout(c);
c = setTimeout(a, 300);
});
a();
})();
</script>