网页关键数据与坐标 #63
Description
概述
在前端开发的过程中，往往会遇到需要判断一个元素是否在可见视窗内的需求。
其实很简单，就是在window上注册scroll事件，然后获取一个元素的绝对定位（相对于网页左上角的距离）减去滚动条的垂直偏离距离（pageYOffset || scrollY）是不是在可见视窗（viewport）的高度范围内。
我们继续拓展，在这篇文章你将会知道如何获取下面的几个关键值：
- 显示器的宽高和浏览器最大的宽高
- 浏览器实际的宽高
- 可视窗口的宽高
- 整个网页的宽高
- 网页的显示部分的宽高
- 滚动条的偏移距离
- 元素的绝对定位、相对定位
罗列相关的Web API
- screen
width，屏幕的宽度
height，屏幕的高度
availWidth，浏览器最大化的宽度
availHeight，浏览器最大化的高度
- window
screenX，浏览器距离显示器左边界的距离
screenY，浏览器距离显示器顶部的距离
pageYOffset | scrollY，滚动条垂直偏移量
pageXOffset | scrollX，滚动条水平偏移量
innerHeight，浏览器内可视窗口的高度（包括滚动条）
innerWidth，浏览器内可视窗口的宽度（包括滚动条）
outerHeight，浏览器实际的高度
outerWidth，浏览器实际的宽度
- document
documentElement，返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）
body，返回当前文档中的<body>元素或者<frameset>元素
[documentElement | body].clientHeight，网页在可视窗口内的高度（不包括滚动条）
[documentElement | body].clientWidth，网页在可视窗口内的宽度（不包括滚动条）
[documentElement | body].scrollTop，网页在垂直方向上的滚动距离（几乎等于window.scrollY）
[documentElement | body].scrollLeft，网页在水平方向上的滚动距离（几乎等于window.scrollX）
[documentElement | body].scrollHeight，网页在垂直方向上可滚动的距离（相当于网页高度）
[documentElement | body].scrollWidth，网页在水平方向上可滚动的距离（相当于网页宽度）
compatMode，BackCompat | CSS1Compat，是否是quirks模式或标准模式
- HTMLElement
clientHeight，表示元素可显示的高度（以像素表示），包含内边距，但不包括水平滚动条、边框和外边距。
clientWidth，表示元素显示的宽度（以像素表示），该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。
clientTop，表示一个元素顶部边框的宽度（以像素表示），不包括顶部外边距或内边距
clientLeft，表示一个元素的左边框的宽度（以像素表示）
scrollHeight，元素可垂直滚动内容的高度
scrollWidth，元素可水平滚动内容的宽度
scrollTop，元素已垂直滚动内容的高度
scrollLeft，元素已水平滚动内容的宽度
offsetParent，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素（非static）。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）
offsetTop，相对于其 offsetParent 元素的顶部的距离
offsetLeft，相对于其 offsetParent 元素的左边界的距离
offsetHeight，表示一个元素的布局高度，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。
offsetWidth，表示一个元素的布局宽度。
getBoundingClientRect()，返回元素左上角和右下角相对可视窗口的左上角的距离
getBoundingClientRect()的返回值：x、y表示坐标；top、bottom、left、right表示与可视窗口左上角的距离；width、height表示宽高。
记忆小卡片：offsetHeight指的是元素的布局高度（包括边框、内边距，但不包括外边距），clientHeight指的是元素的内部高度（仅包括内边距，但不包括外边距、边框），clientTop指的是上边框的宽度。
document.compatMode
BackCompat 对应quirks mode
CSS1Compat 对应strict mode
- 在Standars mode中：
元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;
- 在Quirks mode中：
width则是元素的实际宽度，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
- 在Standars mode中，使用
document.documentElement；在Quirks mode中，使用document.body
兼容性获取垂直或水平已滚动距离
MDN推荐：
var x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
另一种：
export default function getScrollTop() {
return window.pageYOffset || (document.compatMode && document.compatMode != 'BackCompat' && document.documentElement.scrollTop) || (document.body && document.body.scrollTop)
}
还有一种：
function getOffSetY() {
return document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
}
参考
浏览器的各种位置值获取
document.compatMode的CSS1compat使用介绍
document.compatMode介绍