js相对视口的高度_JavaScript学习笔记：视口宽高、位置与滚动高度

在很多场景下我们需要通过JavaScript来获取视口或DOM元素的大小、位置以及滚动高度。最常见的一个效果，导航吸顶的一个效果。那么今天就来学习这方面相关的知识。

window 和 document

在开始了解视口宽高、位置和滚动高度相关的知识之前，先简单的来了解window和document。在学习新的API之前，我都喜欢在调式工具中将对应的API打印出来。比如：

window对象表示一个包含DOM文档的窗口，其document属性指向窗口中截入的DOM文档。window对象实现了Window接口。一些额外的全局函数、命名空间、对象、接口和构造函数与window没有典型的关联，但却是有效的，它们在JavaScript参考和DOM参考中列出。

再把document打印出来：

Document接口提供了一些在浏览器服务中作为页面内容入口点而加载的一些页面，也就是DOM树。DOM树包括诸如

、以及其他元素。其也为document提供了全局性的函数，例如获取页面的URL，在文档中创建新的元素的函数。

两者之间的区别：

Window对象表示浏览器中打开的窗口；window对象可以省略。比如alert()、window.alert()

Document对象是Window对象的一部分。那么document.body就可以写成window.document.body。浏览器的HTML文档成为Document对象

视口宽高

这里的视口指的是浏览器窗口。在JavaScript中，可以通过window.innerHeight和window.outerHeight获取整个窗口的高度，window.innerWidth和window.outerWidth获取整个窗口的宽度。

上图展示的是浏览器视口的高度的。

属性名

描述

备注window.innerHeight

浏览器窗口高度，如果存在水平滚动条，则包括滚动条

只读属性，没有默认值

window.outerHeight

浏览器窗口整个高度，包括窗口标题、工具栏、状态栏等

只读属性，没有默认值

window.innerWidth

浏览器窗口宽度，如果存在垂直滚动条，则包括滚动条

只读属性，没有默认值

window.outerWidth

浏览器窗口整个宽度，包括侧边栏，窗口镶边和调正窗口大小的边框

只读属性，没有默认值

看一个实际页面：

注意：IE8及以下版本不支持window.innerHeight和window.innerWidth等属性。

对于不支持window.innerHeight等属性的浏览器中，可以读取documentElement和body的高度。它们的大小和window.innerHeight是一样的。事实上也略有不同。

document.documentElement.clientHeight

document.body.clientHeight

其中documentElement是文档根元素，就是标签;body就是

元素：

而document.documentElement.clientHeight和document.body.clientHeight区别在于：

document.documentElement.clientHeight：不包括整个文档的滚动条，但包括元素的边框

document.body.clientHeight：不包括整个文档的滚动条，也不包括元素的边框，也不包括

的边框和滚动条

挂靠在window下的宽高还有window.screen，window.screen包含有关于用户屏幕的信息。它包括：

window.screen.width：显示器屏幕的宽度

window.screen.height：显示器屏幕的高度

window.screen.availHeight：浏览器窗口在屏幕上可占用的垂直空间，即最大高度

window.screen.availWidth：返回浏览器窗口可占用的水平宽度

window.screenTop：浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的距离

window.screenLeft：返回浏览器可用空间左边距离屏幕(系统桌面)左边界的距离

除此之外，还有偏移量的控制：

offsetHeight：元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话)，不包含:before或:after等伪类元素的高度。对于文档的bo