offset、client、scroll

offset偏移量

1. 定位父级 offsetParnet：与当前元素最近的经过定位的父级元素

• 元素自身有fixed定位，offsetParent是null
• body元素的offsetParent是null
• 元素自身无fixed定位,offsetParent是body

元素自身无定位，父级元素存在定位,offsetParent是已最近的经过定位的父级元素

<div id="father" style="position:relative">
  <div id="son">
  </div>
</div>
<!-- son的offsetParent是father -->

<div id="grandfather" style="position:relative">
	<div id="father">
      	<div id="son">
        </div>
	</div>  
</div>
<!-- 这里的son offsetParent为grandfather  -->

2 offsetHeight、offsetWeight

• offsetHeight,offsetWeight即元素的宽高(width+padding+border),包含滚动条
• offsetHeight是只读属性，不可写

3. offsetLeft 、offsetTop

与父元素相差的距离

4. 求元素在浏览器中的位置的函数

function getElementOffsetLeft(element) {
      let left = element.offsetLeft;
      let parent = element.offsetParent;
      while (parent != null) {
        // parent.clientLeft为元素的边框大小
        left = left + parent.clientLeft + parent.offsetLeft;
        parent = parent.offsetParent;
      }
      return left;
    }

client客户端大小
属性只读

元素设置为display:none时，client属性为0

1. clientWidth = width + padding-left + padding-right
2. clientHeight = height + padding-top + padding-bottom，不包含border
3. clientLeft 左边框大小
4. clientTop 上边框大小
   5.获取页面的大小doucument.doucmentElement.clientWidth,doucument.doucmentElement.clientHeight

ScrollHeight与ScrollWeight

属性可读写

1. scrollHeight 表示元素的总高度，包含由于溢出而无法出现在网页上的不可见部分,
2. scrollWeight 表示元素的总宽度，包含由于溢出而无法出现在网页上的不可见部分
3. scrollTop、scrollLeft元素被卷起的高度、宽度,可读写的
4. 当滚动条滚动到内容底部时，符合以下公式 scrollHeight = scrollTop + clientHeight
5. scrollTop = 0方法，指定滚动到哪个位置
6. scrollTo(x,y)方法
7. 将平滑滚动 scrollTo({top:0,left:0, behavior: “smooth”})