JavaScript学习笔记:视口宽高、位置与滚动高度

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

在很多场景下我们需要通过JavaScript来获取视口或DOM元素的大小、位置以及滚动高度。最常见的一个效果,导航吸顶的一个效果。那么今天就来学习这方面相关的知识。

windowdocument

在开始了解视口宽高、位置和滚动高度相关的知识之前,先简单的来了解windowdocument。在学习新的API之前,我都喜欢在调式工具中将对应的API打印出来。比如:

视口宽高、位置与滚动高度

window对象表示一个包含DOM文档的窗口,其document属性指向窗口中截入的DOM文档window对象实现了Window接口。一些额外的全局函数、命名空间、对象、接口和构造函数与window没有典型的关联,但却是有效的,它们在JavaScript参考DOM参考中列出。

再把document打印出来:

视口宽高、位置与滚动高度

Document接口提供了一些在浏览器服务中作为页面内容入口点而加载的一些页面,也就是DOM树。DOM树包括诸如<body><head>以及其他元素。其也为document提供了全局性的函数,例如获取页面的URL,在文档中创建新的元素的函数。

两者之间的区别:

  • Window对象表示浏览器中打开的窗口;window对象可以省略。比如alert()window.alert()
  • Document对象是Window对象的一部分。那么document.body就可以写成window.document.body。浏览器的HTML文档成为Document对象

视口宽高

这里的视口指的是浏览器窗口。在JavaScript中,可以通过window.innerHeightwindow.outerHeight获取整个窗口的高度,window.innerWidthwindow.outerWidth获取整个窗口的宽度。

视口宽高、位置与滚动高度

上图展示的是浏览器视口的高度的。

属性名 描述 备注
window.innerHeight 浏览器窗口高度,如果存在水平滚动条,则包括滚动条 只读属性,没有默认值
window.outerHeight 浏览器窗口整个高度,包括窗口标题、工具栏、状态栏等 只读属性,没有默认值
window.innerWidth 浏览器窗口宽度,如果存在垂直滚动条,则包括滚动条 只读属性,没有默认值
window.outerWidth 浏览器窗口整个宽度,包括侧边栏,窗口镶边和调正窗口大小的边框 只读属性,没有默认值

看一个实际页面:

视口宽高、位置与滚动高度

注意:IE8及以下版本不支持window.innerHeightwindow.innerWidth等属性。

对于不支持window.innerHeight等属性的浏览器中,可以读取documentElementbody的高度。它们的大小和window.innerHeight是一样的。事实上也略有不同。

document.documentElement.clientHeight
document.body.clientHeight

其中documentElement是文档根元素,就是<html>标签;body就是<body>元素:

视口宽高、位置与滚动高度

document.documentElement.clientHeightdocument.body.clientHeight区别在于:

  • document.documentElement.clientHeight:不包括整个文档的滚动条,但包括<html>元素的边框
  • document.body.clientHeight:不包括整个文档的滚动条,也不包括<html>元素的边框,也不包括<body>的边框和滚动条

视口宽高、位置与滚动高度

挂靠在window下的宽高还有window.screenwindow.screen包含有关于用户屏幕的信息。它包括:

  • window.screen.width:显示器屏幕的宽度
  • window.screen.height:显示器屏幕的高度
  • window.screen.availHeight:浏览器窗口在屏幕上可占用的垂直空间,即最大高度
  • window.screen.availWidth:返回浏览器窗口可占用的水平宽度
  • window.screenTop:浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的距离
  • window.screenLeft:返回浏览器可用空间左边距离屏幕(系统桌面)左边界的距离

视口宽高、位置与滚动高度

除此之外,还有偏移量的控制:

offsetHeight:元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。通常,元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before:after等伪类元素的高度。对于文档的body对象,它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。

offsetWidth:一个元素的布局宽度。offsetWidth是测量包含元素的边框、水平线上的内边距、竖直方向滚动条以及CSS设置的宽度的值。

offsetLeft:当前元素左上角相对于offsetParent 节点的左边界偏移的像素值。对块级元素来说,offsetTopoffsetLeftoffsetWidthoffsetHeight 描述了元素相对于 offsetParent 的边界框。然而,对于可被截断到下一行的行内元素(如 span),offsetTopoffsetLeft 描述的是第一个边界框的位置(使用 Element.getClientRects() 来获取其宽度和高度),而 offsetWidthoffsetHeight 描述的是边界框的尺寸(使用 Element.getBoundingClientRect 来获取其位置)。因此,使用 offsetLeftoffsetTopoffsetWidthoffsetHeight 来对应 lefttopwidthheight 的一个盒子将不会是文本容器 span 的盒子边界。

offsetTop:当前元素相对于其 offsetParent 元素的顶部的距离。

offsetParent:返回一个指向最近的(closest,指包含层级上的最近)包含该元素的定位元素。如果没有定位的元素,则 offsetParent 为最近的 table元素对象或根元素(标准模式下为 html;怪异模式下为 body)。当元素的 style.display设置为 none 或定位为fixed时,offsetParent 返回 null

结合上面的,我们用一张图来阐述,更易帮我们理解:

视口宽高、位置与滚动高度

简单的小结一下

那么我们常用位置和大小的计算,可以这样处理。都是基于浏览器的标准模式之下。

浏览器可视区宽高

// 不包含滚动条
// width
document.documentElement.clientWidth
// height
document.documentElement.clientHeight

// 包含滚动条(ie9+, 不是css规范)
// width
window.innerWidth
// height
window.innerHeight

其最佳的方式是:

let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWid
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/offset-scroll-client.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部