首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript 空间坐标的使用

Posted in Javascript onAugust 19, 2020

基础知识

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

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

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

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

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

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

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

JavaScript 空间坐标的使用

视口文档

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

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

注意，均是以像素为单位，且视口尺寸不包括浏览器工具条、菜单、标签、状态栏等

<script>
  document.write(document.documentElement.clientWidth); // 1707
  document.write(document.documentElement.clientHeight) // 803 
</script>

几何形状

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

JavaScript 空间坐标的使用

方法 说明 备注
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 获取元素矩形信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      height: 300px;
      width: 300px;
      padding:10px;
      margin: 10px;
      border:5px solid #ddd;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div></div> 
</body>
<script>
  let div = document.querySelector("div");
  let position = div.getBoundingClientRect();
  console.log(position);

</script>
</html>

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

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

getClientRects

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      width: 200px;
      overflow: auto;
    }
  </style>
</head>


<span>网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。网页很多都是多屏，所以文档尺寸一般大于视口尺寸,当打开控制台后，视口尺寸相应变小。</span>
<script>
  let span = document.querySelector('span')
  let info = span.getClientRects()
  console.log(info)
</script>

</html>

// 第一行信息
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 返回指定坐标点最顶级的元素

元素集合

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
<script>
  let positionEleList = document.elementsFromPoint(100,100);
  console.log(positionEleList);
  
  // div
  // body
  // html
  
</script>
</html>

顶级元素

返回坐标点上的顶级元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
<script>
  let positionEle = document.elementFromPoint(100,100);
  console.log(positionEle);
  
  // div

</script>
</html>

滚动控制

方法 说明 参数说明
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 滚动文档

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 2000px;
      background: linear-gradient(to bottom, red, green, blue, yellow)
    }
  </style>
</head>

<body>

</body>
<script>
  setInterval(() => {
    document.documentElement.scrollBy({top:30,behavior:"smooth"},100); // 相当于每个3秒往下走30px，参照于上次所停留位置，smooth平滑滚动
  },3000);

</script>

</html>

使用 scroll 滚动到指定位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 2000px;
      background: linear-gradient(to bottom, red, green, blue, yellow)
    }
  </style>
</head>

<body>

</body>
<script>
  setInterval(() => {
    document.documentElement.scroll({top:30,behavior:"smooth"},100);
  },3000); // 按照绝对位置，距离上部30px，只走一次，smooth平滑滚动

</script>

</html>

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

与 <a> 标签锚点效果类似。

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

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

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    section {
      height: 2000px;
      background: linear-gradient(to bottom, red, green, blue, yellow)
    }

    body button {
      position: fixed;
      bottom: 10%;
      width: 100px;
      height: 30px;
    }

    body button:first-of-type {
      right: 5%;
    }

    body button:last-of-type {
      left: 5%;
    }
  </style>
</head>

<body>
  <header>
    <h1>头部</h1>
  </header>
  <button class="top">TOP</button>
  <button class="bottom">BOTTOM</button>
  <section></section>
  <footer>
    <h1>底部</h1>
  </footer>
</body>
<script>
  document.querySelector("button.top").addEventListener("click", (event) => {
    let h1 = document.querySelector("header h1");
    h1.scrollIntoView({
      behavior: "smooth",
    })
  });

  document.querySelector("button.bottom").addEventListener("click", (event) => {
    let h1 = document.querySelector("footer h1");
    h1.scrollIntoView({
      behavior: "smooth",
    })
  })
</script>

</html>

到此这篇关于JavaScript 空间坐标的文章就介绍到这了,更多相关JavaScript 空间坐标内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

JavaScript 空间坐标的使用

- Author -

Yunya

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
被jQuery折腾得半死，揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
JavaScript 匿名函数（anonymous function）与闭包（closure）
Oct 04 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
React Native 环境搭建的教程
Aug 19 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
vue下的@change事件的实现
Oct 25 Javascript
vue实现公共方法抽离
Jul 31 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 #Javascript
jQuery实现评论模块
Aug 19 #jQuery
javaScript代码飘红报错看不懂？读完这篇文章再试试
Aug 19 #Javascript
jQuery实现简单评论功能
Aug 19 #jQuery
原生JS实现多条件筛选
Aug 19 #Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 #Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 #Javascript
组策略(1) mounted(1) destoon(1) create(1) 日志格式分析(1) Windows server 2012(17)  AD域(1) TableField(1) 子查询(1) nginx(76)
You might like
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
关于打架的检讨书
2014/01/17 职场文书
留守儿童工作方案
2014/06/02 职场文书
大学生工作求职信
2014/06/23 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书