页面可视宽高

最新推荐文章于 2023-08-22 19:24:44 发布

起晚的蜗牛

最新推荐文章于 2023-08-22 19:24:44 发布

阅读量1.4k

点赞数

分类专栏： CSS 基础笔记 html

本文链接：https://blog.csdn.net/hupian1989/article/details/81173330

版权

CSS 基础笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

最近项目中要做一个缩略图放大显示功能，放大的图片由用户上传，宽高没有限制。视觉要求是：按原尺寸显示图片，图片右上角放一个关闭图标；图片若是溢出可视区，按原宽高比缩小到可视区域。实现时涉及到了可视区域大小的获取，查询接口，发现有很多个表示页面‘width’和‘height’ 的属性。下面以Height 为例，Width 与之对称。

1） window对象有innerHeight和outerHeight

window.innerHeight: 页面可视口的大小，包括水平滚动条的高度，但不包括页面溢出部分。
window.outerHeight：整个浏览器窗口的大小，包括窗口标题，状态栏，工具栏等。

2） window 对象的screen 对象有height 和availHeight，这两个高度跟屏幕有关，与浏览器和页面无关

window.screen.height: 指当前屏幕分辨率的高度
window.screen.availHeight: 指屏幕可用工作区高度

3）所有DOM 对象都有clientHeight，offsetHeight，scrollHeight

clientHeight: 'returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin'。指元素内部的可视且可用高度，包括内间距，但不包括边框，外边距，以及水平滚动条高度，和溢出部分高度
offsetHeight：'is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.'。指元素的可视高度，包括边框，内间距，水平滚动条高度，但不包括溢出部分高度。
scrollHeight：'is a measurement of the height of an element’s content including content not visible on the screen due to overflow'. 指元素整体内容的高度，包括溢出部分。（实际计算时会加上top and bottom padding）。当整体内容高度小于元素height时，即没有溢出，不同浏览器处理方式会不一样。chrome 认为 scrollHeight = max（内容高度，clientHeight），即scrollHeight>= clientHeight , 但低版本的IE 6，7 会认为 scrollHeight 就是内容高度，可以小于clientHeight。

如下示列（使用chrome67）：

container 元素的 clientHeight = height + top and bottom padding - H scrollbar height;

container 元素的offsetHeight = height + top and bottom padding + top and bottom borders ;

container 元素的scrollHeight = All children height + top and bottom padding;

从上可以知，可以使用 offsetHeight - clientHeight - top and bottom borders 计算出水平滚动条的高度。

如果要获取页面可视区域高度：可使用document 对象下的子对象 documentElement 或body 对象来获取。两个子对象的区别：

document.documentElement：指的是<html> 标签对应的DOM元素；
document.body: 指的是<body>标签对应的DOM 元素；

在使用这两个子对象分别获取clientHeight，offsetHeight，scrollHeight时，发现了一些异常（chrome 67）：

根据上面的解释，DOM元素的clientHeight < offsetHeight ，但是document.documentElement.clientHeight 大于了offsetHeight。以上的计算规则并不适用。实际上不同的浏览器对于 document.documentElement 的高度计算处理也存在差异。在chrome 中：

document.documentElement.clientHeight : window窗口可见高度, 但不包括水平scrollbar height, 即window.innerHeight - H scrollbar height;

document.documentElement.offsetHeight: body.offsetHeight + top and bottom margin

document.documentElement.scrollHeight: >= document.documentElement.clientHeight

document.body.clientHeight: body height + top and bottom padding;

document.body.offsetHeight: body height + top and bottom padding + borders；

document.body.scrollHeight： >=document.body.clientHeight;

因此若要获取可视窗口的高度应使用 document.documentElement.clientHeight, 或者window.innerHeight, 后者更准确, 但是IE8 以下浏览器没有这个属性。

如果浏览器存在垂直滚动条，内容溢出，若要获取页面高度(包括溢出)应使用 document.documentElement.scrollHeight;

如果浏览器不存在垂直滚动条，内容未溢出，若要获取页面内容高度，使用 document.documentElement.offsetHeight；

考虑到浏览器但兼容性，可使用如下方法获取窗口可视区：

viewableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.offsetHeight

参考：

https://harttle.land/2016/04/24/client-height-width.html

https://blog.csdn.net/woxueliuyun/article/details/8638427

起晚的蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面可视宽高

最近项目中要做一个缩略图放大显示功能，放大的图片由用户上传，宽高没有限制。视觉要求是：按原尺寸显示图片，图片右上角放一个关闭图标；图片若是溢出可视区，按原宽高比缩小到可视区域。实现时涉及到了可视区域大小的获取，查询接口，发现有很多个表示页面‘width’和‘height’ 的属性。下面以Height 为例，Width 与之对称。1） window对象有innerHeight和outerHe...
复制链接

扫一扫