offset、client、scroll三大系列作用，以及区别

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

1.Offset client scroll指的是浏览器窗口或元素内的滚动条所滚动的距离。当用户在浏览器窗口或元素内移动滚动条时，浏览器或元素会记录滚动的距离，并将其称为“offset client scroll”。
2.Offset client scroll指的是浏览器窗口或元素内的滚动条所滚动的距离。当用户在浏览器窗口或元素内移动滚动条时，浏览器或元素会记录滚动的距离，并将其称为“offset client scroll”。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、offset系列

1.offsetWidth

元素的宽度+元素左右的padding+元素左右的border

2.offsetHeight

元素的高度+元素上下的padding+元素上下的border

3.offsetLeft

3和4都分为两种情况

1.父元素没有定位时

元素距离左侧浏览器的距离

2.父元素有定位时

元素距离父元素左侧的距离

4.offsetTop

1.父元素没有定位时

元素距离上侧浏览器的距离

2.父元素有定位时

元素距离父元素上侧的距离

注意：不存在offsetRight以及offsetBottom

---

二、client系列

1.clientWidth

元素的宽度+元素左右的padding

2.clientHeight

元素的高度+元素上下的padding

3.clientTop

元素上边框的宽度

4.clientLeft

元素左边框的宽度

---

三、scroll系列

1.scrollWidth

元素的宽度+滚动条滚动的距离

2.scrollHeight

元素的高度+滚动条滚动的距离

3.scrollTop

上下滚动条滚动的距离（可以设置）

4.scrollLeft

左右滚动条滚动的距离（可以设置）

四、代码示例

var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了三大系列，window.pageXOffset、window.pageYOffset和document.documentElement.scrollLeft、document.documentElement.scrollTop是获取浏览器窗口或文档元素的滚动条的属性。通过获取这些属性，我们可以获取到当前窗口或元素的offset client scroll。