JS关于视口和滚动易混的几个API

2017-08-10 本文已影响39人 7天苹果

整个窗口大小

innerHeight与outerHeight

通过window.innerHeight和window.outerHeight可以得到整个窗口的高度。其中：

innerHeight是DOM视口的大小，包括滚动条。
outerHeight是整个浏览器窗口的大小，包括窗口标题、工具栏、状态栏等。

整个窗口

把Height改为Width同样有效，分别是innerWidth和outerWidth。

clientHeight

在不支持window.innerHeight的浏览器中，可以读取documentElement和body的高度，它们的大小和window.innerHeight是一样的（其实不太一样，见下一小节）。

document.documentElement.clientHeight
document.body.clientHeight
// 其中documentElement是文档根元素，就是<html>标签。

body顾名思义就是<body>标签了。这两种方式兼容性较好，可以一直兼容到IE6。

最佳实践

既然获取窗口大小存在浏览器兼容问题，在实践中通常使用下面的代码来兼容所有浏览器：

var height = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;

事实上后两种方式获取的高度和window.innerHeight是不一样的，这3个属性的值逐个变小。具体说来：

window.innerHeight包括整个DOM：内容、边框以及滚动条。
documentElement.clientHeight不包括整个文档的滚动条，但包括<html>元素的边框。
body.clientHeight不包括整个文档的滚动条，也不包括<html>元素的边框，也不包括<body>的边框和滚动条。

滚动高度

在使用JavaScript控制页面滚动时（例如回到顶部），需要知道页面当前滚动到了哪里，以及滚动到的目标是哪里。这便是滚动高度。这涉及到4个DOM属性：clientHeight, offsetHeight, scrollHeight, scrollTop。

所有DOM元素都有上述4各属性，只需要给它固定大小并设置overflow:scroll即可表现出来。

clientHeight: 内部可视区域大小。（只包含padding，不包含border、滚动条和margin）
offsetHeight：整个可视区域大小，包括border和scrollbar在内。
scrollHeight：元素内容的高度，包括溢出部分。
scrollTop：元素内容向上滚动了多少像素，如果没有滚动则为0。

图片来自网络

对应的横向属性为：clientWidth, offsetWidth, scrollWidth, scrollLeft。