本文汇总了JavaScript中获取网页可视区域宽高、正文全文尺寸、滚动条位置以及屏幕分辨率的关键DOM属性。通过document.body、window.screen等对象，可准确获取clientWidth、scrollHeight、scrollTop及screen.height等数值，适用于动态加载内容或响应式布局开发。
网页可视区域与屏幕属性获取
获取网页可视区域宽度：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) {
/*在此处编写加载图片的逻辑代码*/
}