[TOC]

视口与文档

houdunren.com (opens new window)@ 向军大叔
首先理解视口（窗口）与文档的含义

  • 网页很多都是多屏（通过滚动条显示看不见的内容），所以文档尺寸一般大于视口尺寸
  • 视口尺寸不包括浏览器工具条、菜单、标签、状态栏等
  • 当你打开控制台后，视口尺寸就相应变小了
  • position使用文档定位，fixed使用视口定位
  • 文档坐标在页面滚动时不发生改变
  • 视口坐标的操作需要考虑滚动条的位置

    #视口与文档尺寸

    视口坐标需要知道滚动条位置才可以进行计算，有以下几种方式获取滚动位置
方法 说明 注意
window.innerWidth 视口宽度 包括滚动条（不常用）
window.innerHeight 视口高度 包括滚动条（不常用）
document.documentElement.clientWidth 视口宽度
document.documentElement.clientHeight 视口高度

#几何尺寸

元素在页面中拥有多个描述几何数值的尺寸，下面截图进行了形象的描述。
坐标都是从左上角计算，这与CSS中的right/bottom等不同

#方法列表

下面是获取尺寸的方法或属性

方法 说明 备注
element.getBoundingClientRect 返回元素在视口坐标及元素大小，包括外边距，width/height与offsetWidth/offsetHeight匹配 窗口坐标
element.getClientRects 行级元素每行尺寸位置组成的数组
element.offsetParent 拥有定位属性的父级，或body/td/th/table 对于隐藏元素/body/html值为null
element.offsetWidth 元素宽度尺寸，包括内边距与边框和滚动条
element.offsetHeight 元素高度尺寸，包括内边距与边框和滚动条
element.offsetLeft 相对于祖先元素的X轴坐标
element.offsetTop 相对于祖先元素的Y轴坐标
element.clientWidth 元素宽度，不包含边框，只包含内容和内边距，行元素尺寸为0
element.clientHeight 元素高度，不包含边框，只包含内容和内边距，行元素尺寸为0
element.clientLeft 内容距离外部的距离，滚动条在左侧时包括滚动条尺寸
element.clientTop 内容距离顶部的距离，滚动条在顶部时包括滚动条尺寸
element.scrollWidth 元素宽度，内容+内边距+内容溢出的尺寸
element.scrollHeight 元素高度，内容+内边距+内容溢出的尺寸
element.scrollLeft 水平滚动条左侧已经滚动的宽度
element.scrollTop 垂直滚动条顶部已经滚动的高度

#getComputedStyle

为什么有时不能使用getComputedStyle

  • 尺寸设置auto时获取结果不可用
  • 由于滚动条的存在，不同浏览器返回结果不同

  • 当元素没有设置CSS尺寸时，获取不到相应的尺寸内容

    #getBoundingClientRect

    使用getBoundingClientRect获取元素相对于文档的几何坐标信息。

  • 如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。

  • 如果box-sizing: border-box，元素的的尺寸等于 width/height。


houdunren.com



计算结果的矩形尺寸包括外边距，不包括边框与内边距，上例计算结果如下 | **尺寸** | **值** | | --- | --- | | x | 300 | | y | 300 | | width | 340 | | height | 162.40000915527344 | | top | 300 | | right | 640 | | bottom | 462.40000915527344 | | left | 300 | ### [#](https://doc.houdunren.com/js/19%20%E7%A9%BA%E9%97%B4%E5%9D%90%E6%A0%87.html#getclientrects)getClientRects getClientRects用于返回多行元素所占的尺寸，下面示例将为每行返回所占的空间尺寸


网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。


上例计算结果如下

(index) x y width height top right bottom left 值
0 8 8 1496.4500732421875 22.399999618530273 8 1504.4500732421875 30.399999618530273 8
1 8 30.399999618530273 436.2250061035156 22.399999618530273 30.399999618530273 444.2250061035156 52.79999923706055 8
length 2

#坐标点元素

JS提供了方法获取指定坐标上的元素，如果指定坐标点在视口外，返回值为NULL

  • 坐标都是从左上角计算，这与CSS中的right/bottom等不同
  • 窗口坐标类似于position:fixed
  • 文档坐标类似于position:absolute | 方法 | 说明 | | —- | —- | | element.elementsFromPoint | 返回指定坐标点所在的元素集合 | | element.elementFromPoint | 返回指定坐标点最底层的元素 |

#元素集合

返回指定坐标点上的元素集合



返回结果为
0: div
1: body
2: html

#底层元素

返回坐标点上的底层的元素



返回结果为
div

#滚动控制

下面掌握文档或元素的滚动操作

#方法列表

方法 说明 说明
element.scrollLeft 获取和设置元素X轴滚动位置
element.scrollTop 获取和设置元素Y轴滚动位置
element.scrollBy() 按偏移量进行滚动内容 参数为对象，{top:垂直偏移量,left:水平偏移量,behavior:’滚动方式’}
element.scroll() 或 element.scrollTo() 滚动到指定的具体位置 参数为对象，{top:X轴文档位置,left:Y轴文档位置,behavior:’滚动方式’}
element.scrollIntoView(bool) 定位到顶部或底部 参数为true元素定位到顶部，为false定位到窗口底部

#文档滚动位置

下例是查看文档滚动的X/Y坐标示例，请在控制台查看结果



也可以使用window.pageXOffset对象属性获取

#元素滚动位置

下面查看元素内容的滚动属性，请在控制台查看结果

  • 要为元素设置 overflow:auto 以使其产生滚动条
  • 使用scroll 事件来监听结果



### #控制滚动 下面介绍的是控制元素滚动的操作方法 #### #scrollBy 使用scrollBy滚动文档 - behavior:smooth 为平滑滚动 #### #scroll 使用scroll滚动到指定位置 - behavior:smooth 为平滑滚动 #### #scrollIntoView 使用元素scrollIntoView方法实现滚动操作，参数可以是布尔值或对象 - 参数为 true 时顶部对齐，相当于{block: “start”} - 参数为 false 时底部对齐，相当于{block: “end”} - 也可定义 {behavior:’smooth’} 来进行平滑滚动
hdcms.com

TOP ## #回到顶部 下例是开发中常用的回到顶部示例

houdunren.com@向军大叔

TOP

## [#](https://doc.houdunren.com/js/19%20%E7%A9%BA%E9%97%B4%E5%9D%90%E6%A0%87.html#%E6%BC%82%E6%B5%AE%E5%B9%BF%E5%91%8A)漂浮广告 下面是全屏漂浮广告的示例

houdunren.com