dom元素滚动条高度 js_DOM系列：视窗、设备、滚动条和文档尺寸

在上一节中，学习了JavaScript如何获取和设置元素位置和尺寸相关的方法，另外在JavaScript的学习笔记当中也学习了视窗宽度、位置与滚动高度相关的JavaScript方法与属性。今天继续来学习DOM中相关的知识，这篇文章将学习视窗、设备、滚动条和文档等相关的尺寸。其实在前两篇文章中都有涉及这些知识，为了让DOM系列相关的知识更完善，所以再花点时间整理一些这方面的技术点，加强印象。

时至今日，构建Web应用程序是前端主要工作之一。这些Web应用程序要面对众多不同的设备终端，也就是说，我们需要让这些Web应用程序在各种屏幕、分辨率下都应该有一个较好的展示效果。

要将一个Web应用程序适配众多终端屏幕，需要知道的是有多少可用的空间。如果你接触过Web响应式设计(Web Responsive Design)，就知道，Web浏览器客户端就可以很好的处理。最简单的方式就是使用CSS的媒体查询来处理，但也有很多同学通过JavaScript对最终的结果进行一些控制。不过，使用JavaScript来做的话，有许多计算的事情要做。当然，这些计算虽然是JavaScript来处理，但最终还是由浏览器本身来完成。

当涉及到使用JavaScript控制元素位置相关的交互内容时，不能仅依赖浏览器自动帮助我们做正确的事情。我们需要主动(人肉)地去做一些相关计算。听起来可怕，事实上并没有那么可怕，接下来的内容将告诉我们怎么通过JavaScript来做这些事情。当你阅读完这篇文章之后，你会惊叹的地说，原来就是这么的简单。

测量视窗的大小

不管是什么设备，都可以通过浏览器来查看Web页面。听起来很简单，对吧。从技术上讲，这并不完全准确。实际上，你可以通过浏览器的viewport查看Web页面。

Viewport

Viewport指的是网页的显示区域，也就是不借助滚动条的情况下，用户可以看到的部分网页大小，中文译为“视窗”(或“视口”)。正常情况下，viewport和浏览器的显示窗口是一样大小的。但是，在移动设备上，两者可能不是一样大小。

比如，手机浏览器的窗口宽度可能是640px，这时viewport宽度就是640px，但是网页宽度有1200px，正常情况下，浏览器会提供横向滚动条，让用户查看窗口容纳不下的560px。另一种方法则是，将viewport设成1200px，也就是说，浏览器的显示宽度还是640px，但是网页的显示区域达到1200px，整个网页缩小了，在浏览器中可以看清楚全貌。这样一来，手机浏览器就可以看到网页在桌面浏览器上的显示效果。

简单点来说，视窗是指你的浏览器中实际用来显示网页的部分，比如像下图这样：

拿Chrome浏览器来举例，viewport不包括浏览器的地址栏、状态栏或任何其他类型的用户界面。因为这些东西会占用空间。最后有一点很重要，viewport也不包括滚动条占用的空间。

言外之意，根据浏览器开启的不同设置(比如浏览器窗口状态栏、地址栏等)，你的视窗大小将有所不同：

正如前面提到的，viewport是可缩放的。既然可以缩放，那就具有可缩放的相关规则。在Web页面中，可以在HTML文件的

中像下面指定viewport相关的规则：

上面代码指定，viewport的缩放规则是，缩放到当前设备的屏幕宽度(device-width)，初始缩放比例(initial-scale)为1倍，禁止用户缩放(user-scalable)。

viewport 全部属性如下：

width: viewport的宽度

height: viewport的高度

initial-scale: viewport的初始缩放比例

maximum-scale: viewport的最大缩放比例

minimum-scale: viewport的最小缩放比例

user-scalable: viewport的是否允许用户缩放

事实上，在JavaScript中，咱们测量viewport的大小也很容易。调用document.documentElement对象的clientWidth和clientHeight属性就可以测量出viewport的width和height。