首页
所有分类
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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
openlayers实现图标拖动获取坐标
Sep 25 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 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
props(1) ECharts(3) mixin(1) postcss-px2rem(1) ref(1) 绝对定位(1) 匹配(1) lua(3) 相对定位(1) 游标(1)
You might like
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
php类中private属性继承问题分析
2012/11/01 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题
2010/12/11 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
vue实现通讯录功能
2018/07/14 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python如何读取文件中图片格式
2020/01/13 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
英国户外玩具儿童游乐设备网站：TP Toys（蹦床、攀爬框架、秋千、滑梯和游戏屋）
2018/04/09 全球购物
自我评价怎么写正确呢？
2013/12/02 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
如何起草一份正确的合伙创业协议书？
2019/07/04 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
element多个表单校验的实现
2021/05/27 Javascript
Python pygame实现中国象棋单机版源码
2021/06/20 Python