document.body.clientHeight 和 window.screen.height 等等

window.screen.height

获取用户电脑屏幕的高度，与浏览器无关

window.screen.availHeight

电脑屏幕减掉顶部工具栏跟底部工具栏(任务栏)的高度

 

 

window.pageXOffset、window.pageYOffset

文档在窗口左上角水平和垂直方向滚动的像素，所有浏览器支持，除了 IE9 及更早版本

if (window.pageXOffset !== undefined) {  // 所有浏览器，除了 IE9 及更早版本
	alert("水平滚动: " + window.pageXOffset 
	+ ", 垂直滚动: " + window.pageYOffset);
} else {   // IE9 及更早版本
	alert("水平滚动: " + document.documentElement.scrollLeft 
	+ ", 垂直滚动: " + document.documentElement.scrollTop);
}

　

官方的了解一下这三个属性：

• clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小（经过实践取出来的大多是视口大小）
• scrollHeight：滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）
• offsetHeight：偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距

document.body.clientHeight

浏览器里面的整个页面高度。document.body返回html dom中的body节点 即<body>

document.documentElement.clientHeight

浏览器可用可见高度。document.documentElement返回html dom中的root 节点 即<html>

chrome	火狐
document.body.clientHeight document.body.scrollHeight -> 这三个都会返回文档的大小 document.body.offsetHeight document.documentElement.clientHeight -> 视口的大小 document.documentElement.scrollHeight -> 文档的大小 document.documentElement.offsetHeight -> 文档的大小	document.body.clientHeight -> 视口大小 document.body.scrollHeight -> 文档大小 和 documentElement 三个取到的值一样 document.body.offsetHeight -> 文档大小（不含padding border）比scrollHeght略小 document.documentElement.clientHeight -> 文档大小 document.documentElement.scrollHeight -> 文档大小 （三个值相同，包含滚动条） document.documentElement.offsetHeight -> 文档大小
在eage下模仿ie9（标准模式下）	edge模拟ie8的混杂模式document.compatMode === "BackCompat"
document.body.clientHeight -> 0 document.body.scrollHeight -> 视口的大小 document.body.offsetHeight -> 0 document.documentElement.clientHeight -> 视口的大小 document.documentElement.scrollHeight -> 文档的大小 document.documentElement.offsetHeight -> 文档的大小（包括边框）	document.body.clientHeight -> 视口大小 document.body.scrollHeight -> 文档大小 document.body.offsetHeight -> 文档大小（包括padding 和 border） document.documentElement.clientHeight -> 视口大小 document.documentElement.scrollHeight -> 文档大小 document.documentElement.offsetHeight -> 文档大小