1、获取html 的 可视化区域的宽度和高度(包含滚动条区域)
滚动条的宽度为17px
window.innerWidth
window.innerHeight
2、窗口显示区(可视区域)的宽度和高度,不包括滚动条区域
document.documentElement.clientWidth
document.documentElement.clientHeight
3、<body>
元素的宽度和高度(注意,包括了不可见的区域)
document.body.clientWidth
document.body.clientHeight
横向没有滚动条,所以document.body.clientWidth = document.documentElement.clientWidth
4、当前页面相对于窗口显示区左上角的 X /Y位置,即水平/垂直滚动条已滚动的距离
window.pageXOffset
window.pageYOffset
5、当前页面相对于窗口显示区左上角的 X /Y位置,即水平/垂直滚动条已滚动的距离,同window.pageXOffset/pageYOffset
document.documentElement.scrollTop
document.documentElement.scrollLeft
//在Firefox上有效,在Chrome/Safari,值总为0
在Firefox浏览器
在Chrome浏览器上
6、当前页面相对于窗口显示区左上角的 X /Y位置,即水平/垂直滚动条已滚动的距离,同window.pageXOffset/pageYOffset
document.body.scrollTop
document.body.scrollLeft
//在Chrome/Safari上有效,在Firefox,值总为0
在Chrome浏览器
在Firefox浏览器上
以下是获取浏览器窗口可视区域(不包括滚动条)和滚动条位置的代码,它兼容主流浏览器(IE/Firefox/Chrome/Safari)
// 获取浏览器窗口的可视区域的宽度
function getViewPortWidth() {
return document.documentElement.clientWidth || document.body.clientWidth;
}
// 获取浏览器窗口的可视区域的高度
function getViewPortHeight() {
return document.documentElement.clientHeight || document.body.clientHeight;
}
// 获取浏览器窗口水平滚动条的位置
function getScrollLeft() {
return document.documentElement.scrollLeft || document.body.scrollLeft;
}
// 获取浏览器窗口垂直滚动条的位置
function getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}