offset client scroll三剑客

offset、client、scroll这几个概念很难记忆，所以打算存个档。。。

一、offset

在英文中 offset的意思是抵消

1、offsetX、offsetY

获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX （offsetY）规定了事件对象与目标节点的内填充边（padding edge）在 X （Y）轴方向上的偏移量。

比如我给div元素注册了点击事件，在div内容区域点击，获取的就是相对于div内容区域的坐标，但一定要注意，如果点击区域是border区域那么就是相对于内容区域的负方向了。

2、offsetParent

offsetParent是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, td, th或body元素。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。

简单概括一下：offsetParent指的是某个元素最近的并带有positon属性（默认值static除外）父级元素，如果这个父级元素没有position属性，那么这个父级元素只能为最近的 table, td, th或body元素。

在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 “none”），或者该元素的 style.position 被设为 “fixed”，则该属性返回 null。

3. offsetWidth，offsetHeight

   它们都是只读属性，返回一个元素的布局宽度或高度。如果是标准盒子模型那么：
   宽度：width + padding + border + scrollbar（如果横向滚动条存在）
   高度：height + padding + border + scrollbar（如果纵向滚动条存在）
   如果是怪异盒子模型（IE模型，可以通过box-sizing:border-box;设置）：
   宽度：width
   高度：height

注意：这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用element.getBoundingClientRect方法。 4. offsetLeft 和 offsetTop

它们是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。

说到这里，我们上面提到的offsetParent就派上用场了。

比如我们上面一直讲的例子，把之前加的所有内嵌属性删除掉后，当前div元素的offsetParent 属性值返回body元素。那么div元素的offsetLeft 和 offsetTop的值就是左上角相对于body 的距离。计算公式如下：

offsetLeft = marginLeft + left
offsetTop = marginTop + top

在浏览器控制台打印一下：
即使当前元素的父级有position，值也是一样的，因为它都是相对于父级。

二、client系列

1、clientX和clientY

获取鼠标指针位置相对于可视区域的 x 坐标和y坐标，也就是说是相对于浏览器的距离，跟触发事件的对象没关系

2、clientWidth和clientHeight

可视区域的宽高：width+padding / height + padding

3、clientLeft和clientTop

可视区域的左边框和上边框的宽度

三、scroll系列

原文链接 https://blog.youkuaiyun.com/weixin_42429672/article/details/91348194