与元素位置相关浏览器属性总结

1. scrollIntoView(alignWithTop)

滚动浏览器窗口，一边在当前浏览器视口内看到当前元素，如果参数为true则将视口顶部和元素顶部平齐

2.偏移量

偏移量是指的元素在屏幕上占用的可见空间，包括其高度，宽度，内边距，边框以及滚动条大小

• offsetWidth 元素水平方向上占用空间的大小

• offsetHeight 元素垂直方向上占用空间大小

• offsetLeft 元素到其包含元素的左边框的距离

• offsetTop 元素到其包含元素的上边框的距离
  可以通过这两个属性，循环求解出元素在页面上的偏移量
  *注意：这些偏移量属性都是只读的，而且每次访问它们都需要重新计算，应该尽量避免重复访问这些属性，如果需要重复使用，可以把它们保存在局部变量中，以提高性能。

3.客户区大小

客户区大小是指的元素内部空间大小，与偏移量相比不包含边框和滚动条大小，因此可以用来确定浏览器的视口大小（document.documentElement）

• clientWidth 元素内容宽度加上元素左右内边距的宽度
• clientHeight 元素内容高度加上元素上下内边距的高度
  注意：客户区大小也是只读的，每次访问都要重新计算

4.滚动大小

滚动大小是指包含滚动内容的元素的大小，仅在元素的滚动条的情况下才考虑使用这些属性，包括html元素

• scrollWidth 在没有滚动条的情况下，元素内容和内边距的宽度

• scrollHeight 在没有滚动条的情况下，元素的内容和内边距的高度

• scrollTop 元素上面被隐藏部分的像素数，可以设置此属性

• scrollLeft 元素左侧被隐藏部分的像素数，可以设置此属性

5.元素相对于视口的位置

getBoundingClientRect()
返回一个矩形对象，包含top，bottom，left，right属性，给出元素相对于视口的位置