html监听页面滚动高度,视口的宽高与滚动高度_html/css_WEB-ITnose

很多场景下会需要在JavaScript中获取窗口或DOM元素的宽高，以及滚动高度。 例如：实现滚动效果、创建全屏布局、动态绝对定位等等。 本文就来介绍相关的DOM API： window.innerHeight , window.outerHeight , clientHeight , offsetHeight , scrollHeight , scrollTop 等(当然每个属性都有对应的Width)。

整个窗口大小

innerHeight与outerHeight

通过 window.innerHeight 和 window.outerHeight 可以得到整个窗口的高度。其中： innerHeight 是DOM视口的大小，包括滚动条。

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

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

注意：IE8及以下不支持本节介绍的 window.innerHeight 等属性。

clientHeight

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

document.documentElement.clientHeightdocument.body.clientHeight