【offset/scroll/clientHeight、事件page/screen/offsetY等距离的总结】

图片来源于 https://www.cnblogs.com/leoleo1/p/12684422.html

clientHeight等属性

偏移量-offsetHeight/Width/Top/Left

• offsetParent：最近一个BFC
• offsetTop：距离parent的垂直方向偏移距离
• offserLeft：距离parent的水平方向偏移距离
• offserWidth：偏移元素占页面的宽度
• offserHeight：偏移元素占页面的高度

用户实际内容可视区-clientHeight/Width

• clientHeight：padding+content
• clientWidth：同上

滚动量-scrollHeight/Width/Top/Left

以下属性作用于（超高/宽）内容元素上，而不是（滚动可视内容的）窗口元素。（超高/宽）内容元素是窗口元素的子元素

• scrollTop：垂直方向上已滚动出去的内容的高度，为内容元素顶部到窗口元素可视区域（可视区域：padding+content）的距离

• scrollLeft：水平方向上已滚动出去的内容的高度，为内容元素最左侧到窗口元素可视区域（可视区域：padding+content）的距离

• scrollHeight：需要滚动展示的内容的总高度

• scrollWidth：需要滚动展示的内容的总宽度

视口属性-inner/outer+Height/Width

视口是指浏览器页面的可视窗口大小

属性值在window对象上获取

以谷歌浏览其为例，inner就是显示网页实际内容的区域，outer还包括了书签栏+地址栏的区域

描述属性范围比较

• offsetHeight/Width === box-sizing：‘border-box’，为border+padding+content
• clientHeight/Width，为padding+content
• box-sizing：‘content-box’，为content

事件相关的偏移量（如pageX）

这里都以点击事件为例

offsetX/Y

鼠标的位置相对于事件源的元素的顶部（Y）和左侧（X）的距离

• 一般需要的都是对鼠标点击的事件源元素进行操作，比如拖动
• 如全屏可拖动，事件源元素相对于body、absolute定位，其top/left可以这样设置
  • top：pageY - offsetY
  • left：pageX - offsetX
• 这样元素就会随着鼠标移动而移动

clientX/Y

鼠标相对于浏览器视口（inner）的偏移量

• 可能当元素是相对于视口定位（fixed）时，拖动视口内元素
• 操作同上
  • top：clientY - offsetY
  • left：clientX - offsetX

screenX/Y

鼠标相对于电脑屏幕的偏移量

pageX/Y

鼠标相对于文档（页面所有内容）的偏移量

• 解释：文档的高度（Y方向）一般来说都是会大于屏幕高度的，比如就算浏览器最大化或开F11全屏，要想浏览页面的全部内容，都还需要鼠标滚轮下滑查看。所以可见page代表的文档高度一般都大于屏幕高度screen。除非你的屏幕真的特别大能不scroll就看完全部内容

其他

• 一般情况下，以Y方向为例，page>screen>client，即文档大小>屏幕大小>视口大小