一文搞定offset，scroll，client

offset家族（真实的数据content + paddnig + border）

offset系列用于用于获取元素自身的大小和位置，在网页特效中有广泛应用

offset系列主要有：offsetHeight、offsetWidth、offsetParent、offsetLeft、offsetTop

offsetHeight与offsetWidth

1. 获取的是元素真实的高度和宽度(所谓真实就是包含：内容content、内边距padding和边框border)
2. 获取到的是数值类型，方便计算
3. offsetHeight与offsetWidth是只读属性，不能设置。
4. 构成content + paddnig + border

offsetLeft与offsetTop

1. 就是以父元素作为参照点（父元素的定位不能是static），当前元素相对于父元素左边和上边的偏移量
2. 如果没有父元素那么参照点就是body
3. 这里要注意一点，如果当前定位元素本身是固定定位(position:fixed;)，那么就别费心找爹了，返回的是当前元素与可视窗口的距离。

JavaScript

const box = document.querySelector('.box')
box.addEventListener('click', function(e) {
    const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = e.target
    console.log('offsetWidth:', offsetWidth, typeof offsetWidth)
    console.log('offsetHeight:', offsetHeight, typeof offsetHeight)
    console.log('offsetLeft', offsetLeft, typeof offsetLeft)
    console.log('offsetTop', offsetTop, typeof offsetTop)
})

css

.box {
    width: 400px;
    height: 500px;
    background-color: pink;
    padding: 10px;
    border: 10px solid #ccc;
}

scroll家族(内容padding+content)

scroll家族用来获取盒子内容的大小和位置

scroll家族有：scrollWidth、scrollHeight、scrollLeft、scrollTop

scrollWidth、scrollHeight

1. 是盒子内容的真实的宽度和高度。与和盒子大小无关，仅仅与盒子的内容有关系
2. 构成padding + content

scrollLeft、scrollTop

1. 用于获取内容垂直滚动的像素数。如果没有滚动条，那么scrollTop和scrollLeft值是0

onscroll事件，对于有滚动条的盒子，可以使用onscroll注册滚动事件，每滚动一像素，就会触发该事件。

father.addEventListener('scroll', function(e) {
    const { scrollTop, scrollLeft } = e.target
    console.log('scrollTop:', scrollTop)
    console.log('scrollLeft:', scrollLeft)
})

获取页面被卷去的高度和宽度

通常来说，scroll家族用的最多的地方就是用来获取页面被卷去的宽度和高度，非常的常用

页面被卷去的高度和宽度

window.onscroll = function() {
  let scrollTop = window.pageYOffset
  let scrollLeft = window.pageXOffset
}

示例

JavaScript

const father = document.querySelector('.father')
const son = document.querySelector('.son')
son.addEventListener('click', function(e) {
    const { scrollWidth, scrollHeight } = e.target
    console.log('scrollWidth:', scrollWidth, typeof scrollWidth)
    console.log('scrollHeight:', scrollHeight, typeof scrollHeight)
})
father.addEventListener('scroll', function(e) {
    const { scrollTop, scrollLeft } = e.target
    console.log('scrollTop:', scrollTop)
    console.log('scrollLeft:', scrollLeft)
})

html

<div class="father">
    <div class="son"></div>
</div>

css

.father {
    width: 100px;
    height: 100px;
    border: 20px solid red;
    overflow: scroll;
}
.son {
    width: 400px;
    height: 500px;
    background-color: pink;
    padding: 10px;
    border: 10px solid #ccc;
}

client家族(可视区，内容)

client家族用于获取盒子可视区的大小

client家族有clientWidth、clientHeight、clientLeft、clientTop,

clientX, clientY 获取的是, 当前浏览器显示区域中的 x 和 y, 不算卷去的内容

clientWidth、clientHeight

1. 可视区获取内容和padding的大小

clientLeft、clientTop

1. clientTop与clientLeft 完全没有用，他们就是borderTop与borderLeft

三大家族对比

onresize事件：onresize事件会在窗口被调整大小的时候发生。

window.onresize = function(){
    //事件处理程序
    const width = window.innerWidth;
    const height = window.innerHeight
}