空间坐标

视口与文档

首先理解视口（窗口）与文档的含义

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

视口与文档尺寸

视口坐标需要知道滚动条位置才可以进行计算，有以下几种方式获取滚动位置

方法	说明	注意
window.innerWidth	视口宽度	包括滚动条（不常用）
window.innerHeight	视口高度	包括滚动条（不常用）
document.documentElement.clientWidth	视口宽度
document.documentElement.clientHeight	视口高度

几何尺寸

方法列表

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

方法	说明	备注
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。

getClientRects

getClientRects用于返回多行元素所占的尺寸。

坐标点元素

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

• 坐标都是从左上角计算，这与CSS中的right/bottom等不同
• 窗口坐标类似于position:fixed
• 文档坐标类似于position:absolute

方法	说明
element.elementsFromPoint	返回指定坐标点所在的元素集合
element.elementFromPoint	返回指定坐标点最底层的元素

滚动控制

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

方法列表

方法	说明	说明
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定位到窗口底部

控制滚动

下面介绍的是控制元素滚动的操作方法

scrollBy

使用scrollBy滚动文档

• behavior:smooth 为平滑滚动

document.documentElement.scrollBy({top: 30, behavior: 'smooth'})

scroll

使用scroll滚动到指定位置

• behavior:smooth 为平滑滚动

document.documentElement.scroll({top: 30, behavior: 'smooth'})

scrollIntoView

使用元素scrollIntoView方法实现滚动操作，参数可以是布尔值或对象

• 参数为 true 时顶部对齐，相当于{block: "start"}
• 参数为 false 时底部对齐，相当于{block: "end"}
• 也可定义 {behavior:'smooth'} 来进行平滑滚动

app.scrollIntoView({block: 'end', behavior: 'smooth'})