HTML DOCUMENT窗口的尺寸和位置

最新推荐文章于 2021-06-18 19:46:30 发布

UzumakiHan

最新推荐文章于 2021-06-18 19:46:30 发布

阅读量937

点赞数 2

分类专栏： html

本文链接：https://blog.csdn.net/Hhjian524/article/details/103968265

版权

html 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

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;
}

UzumakiHan

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML DOCUMENT窗口的尺寸和位置

1、获取html 的可视化区域的宽度和高度(包含滚动条区域)滚动条的宽度为17pxwindow.innerWidthwindow.innerHeight2、窗口显示区（可视区域）的宽度和高度，不包括滚动条区域document.documentElement.clientWidthdocument.documentElement.clientHeight3、<body&...
复制链接

扫一扫