js- offset、client、scroll属性的使用（页面定位/跟随/滚动/悬停/返回顶部）

offset client scroll 属性的使用

一、元素偏移量 offset

offset 概述

元素偏移量， 使用 offset相关属性可以动态的得到该元素的位置（偏移）、大小等。

1. 获得元素离带有定位的父元素的位置
2. 获得元素自身的大小（宽度高度）
3. 注意：返回的数值都不带单位
4. offset属性是只读属性，只能获取不能赋值
   
   

二、client元素可视区

client概述

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

1. 注：常用的是clientWidth、clientHeight
   
   

三、scroll 元素滚动

scroll 概述

scroll ：滚动，使用 scroll 属性可以动态的得到该元素的大小、滚动距离等。

注：实际高度意思是内容超出盒子部分的高度也会进行计算

注：页面被卷去的头部

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

页面被卷去的头部：可以通过window.pageYOffset 获得 如果是被卷去的左侧window.pageXOffset

元素被卷去的头部element.scrollTop 与页面被卷的window.pageYOffset不同

总结：

1.offset 经常用于获得元素位置 offsetLeft offsetTop

2.client 经常用于获取元素大小 clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop scrollLeft

4.注意页面滚动的距离通过 window.pageXOffset 获得