JavaScript 获取网页可视区域、滚动位置及屏幕分辨率属性汇总

网页可视区域与屏幕属性获取

获取网页可视区域宽度：document.body.clientWidth

获取网页可视区域高度：document.body.clientHeight

获取包含边线的网页可视区域宽度：document.body.offsetWidth

获取包含边线的网页可视区域高度：document.body.offsetHeight

获取网页正文全文宽度：document.body.scrollWidth

获取网页正文全文高度：document.body.scrollHeight

获取网页垂直滚动条被卷去的高度：document.body.scrollTop

获取网页水平滚动条被卷去的距离：document.body.scrollLeft

获取网页正文部分距离屏幕顶部的距离：window.screenTop

获取网页正文部分距离屏幕左侧的距离：window.screenLeft

获取屏幕分辨率的高度：window.screen.height

获取屏幕分辨率的宽度：window.screen.width

获取屏幕可用工作区高度：window.screen.availHeight

获取屏幕可用工作区宽度：window.screen.availWidth

由于这些属性容易混淆，整理此处以便随时查阅记忆。

基于滚动位置的动态加载示例

掌握上述属性后，可实现动态加载图片等功能。

 
document.onmousewheel = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var hght = document.body.scrollHeight;
if (scrollTop + document.documentElement.clientHeight >= hght) {
/*在此处编写加载图片的逻辑代码*/
}