offset client scroll pageY/Xoffset 常用方法

1.offset（就是正常的元素）

1.offsetWidth 

获取的元素的宽度（边框+内边距+内容）

2.offsetHeight

获取到元素的高度（边框+内边距+内容）

3.offsetTop

获取元素与，最近的，且有定位，的父盒子距离（所以父盒子都没定位，则以body为父盒子）

4.offsetLeft

获取元素与，最近的，且有定位，的父盒子距离（所以父盒子都没定位，则以body为父盒子）

5.offsetparent 

获取到父元素

2.scroll（当滚动来理解）

1.scrollHeight

获取内容的高度，包括被隐藏等的内容，也就是说，内容该多高就多高，不收其他元素的影响

内容没有超出可视区的情况下：按盒子的高度来计算（宽高+内边距）

内容超出可视区的情况下：获取的高度为（内容的高度+一边内边距）且不受任何元素影响，

2.scrollWidth

获取内容宽度,同上，检测到本身内容的的宽度，和内边距

内容没有超出可视区的情况下：按盒子的高度来计算（宽高+内边距）

内容超出可视区的情况下：获取的宽度为（内容的宽度+一边内边距）且不受任何元素影响，

3.scrollTop

获取内容被滚动后覆盖的部分的高度

也就说，当前元素的视口，相对于当前元素的内容，往下滚动1px，元素顶部就被覆盖1px，scrollTop就为1，往下滚动100px，则scrollTop就等于100

4.scrollLeft

同上

5.元素.onscroll

元素.οnscrοll=function（）{} 当前元素每滚动一下，就触发事件   (中间有，点，别没看到)

6. 元素.scroll

元素.scroll(x,y) 给数值不要带单位，会移动到scroll(x,y)的位置    (中间有，点，别没看到)

3.client（当窗口来理解）

1.clientWidth

clientWidth，是窗口（元素的可视区）大小，包含元素的内容宽度和padding

2.clientHeight

clientHeight，是窗口（元素的可视区）大小，包含元素的内容高度和padding

3.clientTop

clientTop 元素的窗口相对于元素的top偏移量（实际求得值为border的上边框）

3.clientLeft

clientLeft 元素的窗口相对于元素的left偏移量（实际求得值为border的左边框）

4.pageY/Xoffset

pageXoffset 为window属性，求出来的值就是整个页面向下移动了多少

pageYoffset 为window属性，求出来的值就是整个页面向左移动了多少

和window.onscroll配合着，做if判断，改变页面的一些元素，会更佳哦！

总结

offset最常用到top/left                 用它来获取元素的位置

scroll最常用到top/left                  用它来获取滚动距离

client最常用到width/height         用它来获取元素的大小

求打赏！！！！！ ！！！！ 让我吃馒头能加辣条