[JavaScript] client系列属性及scroll系列属性

client系列

client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client相关属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度、不含边框,返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度、不含边框,返回数值不带单位

scroll系列

scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。

scroll相关属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度、不含边框,返回数值不带单位
element.scrollHeight	返回自身实际的高度、不含边框,返回数值不带单位

可能盒子里装不下这些文字，那么超出部分的内容就算scrollTop的长度

页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。

三大系列总结

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding,边框,内容区的宽度，返回数值不带单位
element.clientWidth	返回自身包括padding,内容区的宽度，不含边框,返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框,返回数值不带单位

他们的主要用法：

1. offset系列经常用于获得元素位置 offsetLeft offsetTop
2. client经常用于获取元素大小 clientWidth clientHeight
3. scroll经常用于获取滚动距离 scrollTop scrollLeft
4. 注意页面滚动的距离通过window.pageYOffset获得