JavaScript 空间坐标

首先参考画布分为视口（窗口）与文档的含义

网页很多都是多屏，所以文档尺寸一般大于视口尺寸

视口尺寸不包括浏览器工具条、菜单、标签、状态栏等

当打开控制台后，视口尺寸相应变小

文档像position定位，视口类似fixed定位

文档坐标在页面滚动时不发生改变

视口坐标的操作需要考虑滚动条的位置

image-20200818233432727

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

方法 说明 注意
window.innerWidth 视口宽度 包括滚动条（不常用）
window.innerHeight 视口高度 包括滚动条（不常用）
document.documentElement.clientWidth 视口宽度
document.documentElement.clientHeight 视口高度
　　注意，均是以像素为单位，且视口尺寸不包括浏览器工具条、菜单、标签、状态栏等

元素在页面中拥有多个描述几何数值的尺寸，下面截图进行了形象的描述。

image-20200819123923375

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

尺寸设置auto时获取结果不可用

由于滚动条的存在，不同浏览器返回结果不同

元素没有设置尺寸获取不到

getBoundingClientRect

使用getBoundingClientRect获取元素矩形信息

　　计算结果的矩形尺寸不包括外边距

bottom: 340
height: 330
left: 18
right: 348
top: 10
width: 330
x: 18
y: 10
　　getClientRects

多行元素分别返回每行所占的尺寸，下面的行元素将为每行返回矩形尺寸

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

// 第一行信息 bottom: 29.33333396911621 height: 21.33333396911621 left: 8 right: 1683.5555419921875 top: 8 width: 1675.5555419921875 x: 8 y: 8

// 第二行信息
bottom: 50.66666793823242
height: 21.33333396911621
left: 8
right: 264
top: 29.33333396911621
width: 256
x: 8
y: 29.33333396911621
　　Js提供了方法获取指定坐标上的元素，如果指定坐标点在视口外，返回值为null

坐标都是从左上角计算，这与CSS中的right/bottom等不同

窗口坐标类似于position:fixed

文档坐标类似于position:absolute

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

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

　　顶级元素

返回坐标点上的顶级元素

方法 说明 参数说明 window.pageXOffset 文档相对窗口水平滚动的像素距离 window.pageYOffset 文档相对窗口垂直滚动的像素距离 element.scrollLeft() 元素X轴滚动位置 element.scrollTop() 元素Y轴滚动位置 element.scrollBy() 按偏移量进行滚动内容 参数为对象，{top:垂直偏移量,left:水平偏移量,behavior:'滚动方式'} element.scroll() 或 element.scrollTo() 滚动到指定的具体位置 参数为对象，{top:X轴文档位置,left:Y轴文档位置,behavior:'滚动方式'} element.scrollLeft 获取和设置元素X轴滚动位置 这是属性，设置X轴文档位置 element.scrollTop 获取和设置元素Y轴滚动位置 这是属性，设置Y轴文档位置 element.scrollIntoView(bool) 定位到顶部或底部 参数为true元素定位到顶部，为false定位到窗口底部 　　使用scrollBy滚动文档 　　使用scroll滚动到指定位置 　　使用元素scrollIntoView方法实现滚动操作，参数可以是布尔值或对象。

与标签锚点效果类似。

参数为 true时顶部对齐，相当于{block: “start”}

参数为 false时底部对齐，相当于{block: “end”}

定义 {behavior:smooth}为平滑滚动

头部

TOP BOTTOM

底部