彻底搞懂 offsetX、scrollX、clientX 的区别

无论在 iOS 还是前端开发中,关于如何定位一个元素是必须要掌握的知识,而在前端中,元素定位比较难理解,我们今天一起学习下。

在 DOM 设计中,主要通过这些 API 来确定某个元素的具体位置。

offsetTop, offsetLeft, offsetWidth, offsetHeight,

scrollTop, scrollLeft, scrollWidth, scrollHeight,

clientTop, clientLeft, clientWidth, clientHeight,

为什么会有这么多属性来定位一个元素?

我觉得和盒子模型有很大关系,一个盒子就是一个区域,包含 margin、border、padding 和 content。上面 6 个属性可以非常容易定位元素。

彻底搞懂 offsetX、scrollX、clientX 的区别_第1张图片

有没有类似 iOS 中 frame 的概念?

答案是有的。可以通过 Element.getBoundingClientRect() 来确定元素在可视区域中的位置。

这些属性究竟有什么不同,我们一一分析:

1、offsetX —— 相对谁偏移了多少?

offsetX 是 HTMLElement 的只读属性,不可以修改。offset 有“偏移” 的意思,你可能会把这个属性想成与滚动有关,其实与滚动没半毛钱关系。我们先看 offsetTop 这个属性,它表示当前元素顶部到 offsetParent 节点的距离。这里关键点是 offsetParent,它是指当前元素最近的使用 position 不为 static 的祖先节点,如果没有使用 position 的祖先节点,它的值将是 body 节点(这个值有可能也是 null,如果出现这些极端情况可以查 MDN)。其实关键点是「相对谁偏移了多少的问题」。一图胜千言。

彻底搞懂 offsetX、scrollX、clientX 的区别_第2张图片

上图中,由于小人的父元素 div 是 positioned,故它的 offsetParent 为 div,而不是 body,offsetTop 是指小人顶部距离 div 距离(图中红线部分)。

同理 offsetLeft 是距离左边的距离,只要明白了 top,left 属性也就明白了。

offsetWidth 和 offsetHeight 指宽高,包含 boder 、 padding 和 content。

彻底搞懂 offsetX、scrollX、clientX 的区别_第3张图片

总之,offset 相关的属性指元素相对某个元素的位置,与滚动没有半毛钱关系。

2. scrollX —— 滚动了多少?

与 scroll 相关的属性是 Element 的属性,offsetTop、offsetLeft 可读可写,offsetWidth、offsetHeight 只读。

scroll 才真正与滚动相关,我们以竖直方向滚动为例。

只有元素可以滚动 scrollTop 才会有值,否则为 0,也就是说当子元素的高度大于父元素时,设置父元素的 overflow 为 scroll 才会生效。

当 子div 的高度超出 父div 时,父div 需要通过把 overflow 设置为 scroll,这时候 子div 才可以滚动。这里有一点需要注意,图中所标记的 scrollTop 的属性是 子div 的还是 父div 的?欢迎留言说出你的答案。

彻底搞懂 offsetX、scrollX、clientX 的区别_第4张图片

scrollTop 的值可以修改,表示在滚动区域中,竖直方向滚动了多少。通常通过修改这个值来实现让某个元素滚动到指定位置。

关于 scrollHeight 这个也需要特别留意,父 div 的 scrollHeight 是通过子div 计算的,表示可滚动的高度。

scrollWidth 与 scrollHeight 类似。我特意写了一个 demo,想要搞懂这个必须通过 demo 实践。

彻底搞懂 offsetX、scrollX、clientX 的区别_第5张图片

3. clientX  —— 我自身的位置

它是 Element 的属性。client 相关的属性描述的是自身的位置,它没有相对元素。

clientTop 就是 border-top 的值,clientLeft 就是 border-left 的值。而 clientWidth 和 clientHeight 都不包含 border。

彻底搞懂 offsetX、scrollX、clientX 的区别_第6张图片

4. Element.getBoundingClientRect() —— 相对可视区域的位置

通过这个 API 获取元素相对可视区域的位置,返回值是浮点数。其中,大多数情况下 x 与 left 相等,y 与 top 相等,只有当 width 或 height 为负数的时候会有区别。left = x + with,top = y + height。图中黄色区域为边框。

注意观察 bottom 和 right 的值。

彻底搞懂 offsetX、scrollX、clientX 的区别_第7张图片

5. 少不了 demo

我写了一个输出这些属性的方法,方便同时查看这些属性的值:

彻底搞懂 offsetX、scrollX、clientX 的区别_第8张图片

var logBySelector = function (id) {
    let elm = document.querySelector(id);
    logFrame(elm);
    elm.onscroll = function () {
        logFrame(elm);
        if (elm.scrollHeight - elm.scrollTop === elm.clientHeight) {
            console.log('到底了');
        }
        else if (elm.scrollTop === 0) {
            console.log('到顶了');
        }
    }
};


var logFrame = function (elm) {
    console.log(elm, '-------------------------');
    console.log(elm.getBoundingClientRect());
    for (key in elm) {
        let whiteList = [
            'offsetTop', 'offsetLeft', 'offsetWidth', 'offsetHeight',
            'scrollTop', 'scrollLeft', 'scrollWidth', 'scrollHeight',
            'clientTop', 'clientLeft', 'clientWidth', 'clientHeight',
            'offsetParent'
        ];
        if (whiteList.indexOf(key) !== -1) {
            console.log(key, ' = ', elm[key]);
        }
    }
}

demo 地址:https://github.com/lefex/FE/tree/master/%E7%AC%AC%E4%BA%94%E9%98%B6%E6%AE%B5

彻底搞懂 offsetX、scrollX、clientX 的区别_第9张图片

本文讲解了元素相关的位置属性,这几个属性容易弄混,我特意为大家准备了 demo。这些知识与前面讲的 CSS 布局 坚持14天学懂CSS布局(领电子书),盒子模型 第10天:撑起CSS布局的半壁江山---盒子模型 有很大关系。当然我们还需要一节内容来实践一下。大家加油。


推荐阅读:

我是一颗树 · DOM

回到工位“我”悟出了 DOM 设计的精华

打通 DOM 的设计架构

两种方法轻松找到 DOM 元素

你可能感兴趣的:(彻底搞懂 offsetX、scrollX、clientX 的区别)