首页
所有分类
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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
window.onload使用指南
Sep 13 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 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) watch(1) scss(1) okenizer(1) re模块(2) 事件调度器(1) vue-cli3.x(1) 监听(2) 分词器(1) sched(1)
You might like
php Ajax乱码
2008/04/09 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
javascript的push使用指南
2014/12/05 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
利用jquery实现验证输入的是否是数字、小数，包含保留几位小数
2016/12/07 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
anaconda如何查看并管理python环境
2019/07/05 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
美国最好的葡萄酒网上商店：Wine Library
2019/11/02 全球购物
岗位职责说明书
2014/05/07 职场文书
法学求职信
2014/06/22 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
批评与自我批评范文
2014/10/15 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
幼师个人总结范文
2015/02/28 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python