浏览器宽高、位置与滚动

一. 视口（浏览器窗口）宽高

• window.innterHeight：返回窗口的文档显示区的高度，如果有水平滚动条，也包括滚动条高度.

• window.innterWidth：返回窗口的文档显示区的宽度，如果有垂直滚动条，也包括滚动条宽度。

• window.outerHeight：返回浏览器窗口的整个高度，包括窗口标题、工具栏、状态栏等。

• window.outerWidth：返回浏览器窗口的整个宽度，包括任何边框、滚动条和其他窗口元素。

• document.documentElement.clientHeight / document.documentElement.clientWidth：不包括整个文档的滚动条。

二. 偏移量（滚动条）

• window.pageYoffset || document.documentElement.scrollTop：垂直滚动条滚动的距离。
• window.pageXoffset || document.documentElement.scrollLeft：水平滚动条滚动的距离。

三. DOM 元素的大小和位置

const element = document.getElementById("highlight");
const rect = element.getBoundingClientRect();		// 返回元素的大小及其相对于视口的位置

console.log(rect.width, rect.height);	// 元素大小
console.log(rect.top, rect.left);		// 元素相对视口的位置
// rect.bottom = rect.top + rect.height;
// rect.right = rect.left + rect.width;

四. 屏幕宽高

• window.screen.width / window.screen.height：显示器屏幕的宽高
• window.screen.availHeight / window.screen.availWidth：显示器屏幕的可用宽高（不包括Windows任务栏）
• window.screenTop / window.screenLeft：浏览器窗口的边框距离可用屏幕边界的距离