前言

前段时间的开发工作涉及了许多页面中元素的滚动，给我看晕了~~特此理清下思路

一、DOM的位置

对于页面中的某个元素，如何实时获取它的宽高位置信息呢？

1.1、`getBoundingClientRect()`

domRect = element.getBoundingClientRect()。该方法返回一个DOMRect 对象，包含了元素的大小及元素相对于视窗的位置集合信息。该对象有6个属性：top,lef,right,bottom,width,height。这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

因此我们利用该方法可以获得页面中某个元素的左，上，右和下分别相对浏览器视窗（浏览器可视范围）的位置（不包含文档卷起的部分）。
在这里插入图片描述

注意

Firefox3+、Opera9.5、Chrome、Safari支持该方法；IE5以上都能支持，但是又一点点地方需要修正一下，IE67中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，且没有width和height属性，因此我们需要做个兼容。

document.documentElement.clientTop;  // 在IE67中始终为2，其他高级点的浏览器为0
document.documentElement.clientLeft; // 在IE67中始终为2，其他高级点的浏览器为0
functiongGetRect (element) {
    var rect = element.getBoundingClientRect();
    return{
        top    :   rect.top + scrollTop - clientTop,
        bottom :   rect.bottom - top,
        left   :   rect.left + scrollLeft - clientLeft;
        right  :   rect.right - left
    }
}

1.2、`element.scrollLeft && element.scrollTop`

Element.scrollLeft
属性用来获取或设置元素滚动条到元素左边的距离（但是要注意元素的内容排列方向是right-to-left还是left-to-right）

scrollTop可以获取或设置一个元素的内容垂直滚动的像素数。常用于让当前元素垂直回归到首屏。

// 常用兼容性代码
const scrollTop = window.pageYOffset || el.scrollTop || body.scrollTop;
const scrollLeft = window.pageXOffset || el.scrollLeft || body.scrollLeft;

实战练习：JS实现横向tab栏切换，选中项自动滚动居中

<script>
        // 获取到 container 整个盒子
        var container = document.querySelector(".container");
        // 获取包裹盒子 container.offsetWidth
        var containerW = container.offsetWidth;
        // 找到所有需要被点击的 item 的集合
        var itemList = document.querySelectorAll(".item");
        // 遍历数组
        for (let i = 0; i < itemList.length; i++) {
            // 给每个元素添加点击事件
            itemList[i].onclick = function () {
                // 获取到当前点击元素的 offsetLeft  - 包裹盒子 offsetWidth 的一半 + 当前点击元素 offsetWidth 的一半
                var scrollLeftNum =itemList[i].offsetLeft - containerW / 2 + itemList[i].offsetWidth / 2;
                // 关键代码：设置元素的scrollLeft
                container.scrollLeft = scrollLeftNum;
            }
        }
</script>

在这里插入图片描述

1.3、`offsetParent && offsetLeft && offsetTop`-元素自身相关的属性（开发中不常用到）

offsetParent：返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则offsetParent为最近的table元素对象或根元素（标准模式下为元素，怪异模式下为元素）。当元素的style.display设置为none或position为fixed时，offsetParent返回null。

在这里插入图片描述

1.4、`element.clientTop && element.clientLeft`

前面提到过offsetLeft和offsetTop没有考虑border。为了测量border的大小，我们使用clientLeft和clientTop来获取。

element.clientTop代表一个元素顶部边框border的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。

border-left的宽度：clientLeft = 25
border-top的宽度：clientTop = 25

// 常用兼容性代码
const clientTop = el.clientTop || body.clientTop || 0;
const clientLeft = el.clientLeft || body.clientLeft || 0;