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

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在很多场景下我们需要通过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等伪类元素的高度。对于文档的bo

剩余80%内容付费后可查看

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

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

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