JS基础 空间坐标
Posted wgchen~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS基础 空间坐标相关的知识，希望对你有一定的参考价值。
阅读目录
视口与文档
首先理解视口（窗口）与文档的含义
- 网页很多都是多屏（通过滚动条显示看不见的内容），所以文档尺寸一般大于视口尺寸
- 视口尺寸不包括浏览器工具条、菜单、标签、状态栏等
- 当你打开控制台后，视口尺寸就相应变小了
- 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。
<style>
*
padding: 0;
margin: 0;
main
padding: 200px;
position: relative;
#app
width: 200px;
background: #e34334;
margin: 100px;
padding: 50px;
border: 20px solid #efbc0f;
color: white;
text-align: center;
</style>
<main>
<div id="app">wgchen.blog.csdn.net</div>
</main>
<script>
let app = document.getElementById('app')
let info = app.getBoundingClientRect()
console.table(info)
</script>
计算结果的矩形尺寸包括外边距，不包括边框与内边距，上例计算结果如下
| 尺寸 | 值 |
|---|---|
| x | 300 |
| y | 300 |
| width | 340 |
| height | 162.40000915527344 |
| top | 300 |
| right | 640 |
| bottom | 462.40000915527344 |
| left | 300 |
getClientRects
getClientRects用于返回多行元素所占的尺寸，下面示例将为每行返回所占的空间尺寸
<style>
span
width: 200px;
overflow: auto;
</style>
<span>
网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。
</span>
<script>
let span = document.querySelector('span')
let info = span.getClientRects()
console.log(info)
</script>
上例计算结果如下
| (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 | 返回指定坐标点最底层的元素 |
元素集合
返回指定坐标点上的元素集合
<style>
div
width: 200px;
height: 200px;
</style>
<div></div>
<script>
const info = document.elementsFromPoint(100, 100)
console.log(info)
</script>
底层元素
返回坐标点上的底层的元素
<style>
div
width: 200px;
height: 200px;
</style>
<div></div>
<script>
const info = document.elementFromPoint(100, 100)
console.log(info)
</script>
滚动控制
下面掌握文档或元素的滚动操作
方法列表
| 方法 | 说明 | 说明 |
|---|---|---|
| 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 坐标示例，请在控制台查看结果
<div style="width: 3000px; height: 3000px; background: #e34334"></div>
<script>
window.onscroll = function ()
console.log(document.documentElement.scrollTop)
console.log(document.documentElement.scrollLeft)
</script>
也可以使用 window.pageXOffset 对象属性获取
<div style="width: 3000px; height: 3000px; background: #e34334"></div>
<script>
window.onscroll = function ()
console.log(window.pageXOffset)
console.log(window.pageYOffset)
</script>
元素滚动位置
下面查看元素内容的滚动属性，请在控制台查看结果
- 要为元素设置
overflow:auto以使其产生滚动条 - 使用
scroll事件来监听结果
<div id="app" style="width: 300px; height: 300px; border: solid 6px #e34334; overflow: auto">
<div style="width: 1000px; height: 1000px; background: #833ca4"></div>
</div>
<script>
const app = document.getElementById('app')
app.addEventListener('scroll', function ()
console.log(this.scrollLeft)
console.log(this.scrollTop)
)
</script>
控制滚动
下面介绍的是控制元素滚动的操作方法
使用 scrollBy 滚动文档
behavior:smooth 为平滑滚动
<style>
body
height: 3000px;
</style>
<script type="module">
setInterval(() =>
document.documentElement.scrollBy( top: 30, behavior: 'smooth' )
, 100)
</script>
使用 scroll 滚动到指定位置
behavior:smooth 为平滑滚动
<style>
body
height: 3000px;
</style>
<script type="module">
setTimeout(() =>
document.documentElement.scroll( top: 30, behavior: 'smooth' )
, 1000)
</script>
使用元素 scrollIntoView 方法实现滚动操作
参数可以是布尔值或对象
- 参数为 true 时顶部对齐，相当于block: “start”
- 参数为 false 时底部对齐，相当于block: “end”
- 也可定义 behavior:‘smooth’ 来进行平滑滚动
<style>
div
height: 2000px;
background: red;
border-top: solid 50px #efbc0f;
border-bottom: solid 50px #1bb491;
color: #fff;
span
border-radius: 50%;
color: #fff;
background: #000;
width: 50px;
height: 50px;
display: block;
text-align: center;
line-height: 50px;
position: fixed;
top: 50%;
right: 50px;
border: solid 2px #ddd;
</style>
<div id="app">wgchen.blog.csdn.net</div>
<span>TOP</span>
<script>
document.querySelector('span').addEventListener('click', () =>
let app = document.querySelector('#app')
app.scrollIntoView( block: 'end', behavior: 'smooth' )
)
</script>
回到顶部
下例是开发中常用的回到顶部示例
<style>
*
padding: 0;
margin: 0;
span
width: 50px;
height: 50px;
background-color: #e34334;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: fixed;
right: 50px;
bottom: 50px;
border-radius: 10px;
opacity: 0;
transition: 1s;
cursor: pointer;
span.show
opacity: 1;
transform: rotate(360deg);
</style>
<div id="app" style="height: 2000px">
wgchen.blog.csdn.net@博客
</div>
<span id="bt">TOP</span>
<script>
window.addEventListener('scroll', () =>
// 判断是否距离页面底部200px
let state = document.documentElement.offsetHeight - 200 < document.documentElement.scrollTop + document.documentElement.clientHeight
// 按钮元素
const span = document.querySelector('span')
// 根据滚动位置添加或移除类
span.classList[state ? 'add' : 'remove']('show')
)
// 回到顶部按钮事件
document.querySelector('#bt').addEventListener('click', function ()
// 平滑回滚到页面顶部
document.documentElement.scrollIntoView( block: 'start', behavior: 'smooth' )
)
</script>
漂浮广告
下面是全屏漂浮广告的示
<main>
<div id="app" style="width: 200px; height: 200px; background:#E34334">
wgchen.blog.csdn.net
</div>
</main>
<script>
class Ad
constructor(options)
this.$el = document.querySelector(options.el)
this.$options = Object.assign( timeout: 2, step: 1 , options)
//初始移动方向，1向下/向右 -1 向上/向左
this.x = this.y = 1
// 设置定位模式
this.$el.style.position = 'fixed'
setInterval(this.run.bind(this), this.$options.timeout)
//定时回调函数
run()
this.$el.style.left = this.left() + 'px'
this.$el.style.top = this.top() + 'px'
left()
let x, width = this.$el.getBoundingClientRect()
let clientWidth = document.documentElement
if (x > clientWidth - width) this.x = -1
if (x < 0) this.x = 1
return x + this.x * this.$options.step
top()
let y, height = this.$el.getBoundingClientRect()
let clientHeight = document.documentElement
if (y > clientHeight - height) this.y = -1
if (y < 0) this.y = 1
return y + this.y * this.$options.step
new Ad( el: '#app', timeout: 10, step: 1 )
</script>
以上是关于JS基础 空间坐标的主要内容，如果未能解决你的问题，请参考以下文章