基础知识

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

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

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

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

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

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

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

视口文档

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

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

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

<script>

        document.write(document.documentElement.clientWidth);  // 1707

        document.write(document.documentElement.clientHeight)  // 803

</script>

几何形状

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

方法	说明	备注
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之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
探究javascript对象和数组的异同，及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
JavaScript自定义浏览器滚动条兼容IE、火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
JavaScript进阶之路（一）初学者的开始
一:写在前面的问题和话一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

随机推荐

tomcat8开启APR模式
1 Apr模式介绍 Tomcat可以使用APR来提供超强的可伸缩性和性能,更好地集成本地服务器技术.APR(Apache Portable Runtime)是一个高可移植库,它是Apache HTTP ...
《Python Web开发实战》|百度网盘免费下载|Python Web开发
<Python Web开发实战>|百度网盘免费下载|Python Web开发提取码:rnz4 内容简介这本书涵盖了Web开发的方方面面,可以分为如下部分: 1. 使用最新的Flask ...
做完这套面试题，你才敢说懂Excel
下面的题目来自一份商品专员的面试题,其中有涉及到条件格式.自定义排序.数据验证制作下拉菜单.查找引用类函数.文本提取函数等等技能. 满满的干货技能可不是商品专员“专属”,如果你能熟练掌握,在平日工作中 ...
1-Numpy的通用函数(ufunc)
一.numpy“通用函数”(ufunc)包括以下几种: 元素级函数(一元函数):对数组中的每个元素进行运算数组级函数:统计函数,像聚合函数(例如:求和.求平均) 矩阵运算随机生成函数常用一元通用 ...
PHP is_object() 函数
is_object() 函数用于检测变量是否是一个对象. PHP 版本要求: PHP 4, PHP 5, PHP 7高佣联盟 www.cgewang.com 语法 bool is_object ( m ...
PHP pow() 函数
实例 pow() 的实例: <?phpecho(pow(2,4) . "<br>");echo(pow(-2,4) . "<br>" ...
PDOStatement::fetchAll
PDOStatement::fetchAll — 返回一个包含结果集中所有行的数组(PHP 5 >= 5.1.0, PECL pdo >= 0.1.0)高佣联盟 www.cgewang.c ...
ZROI 提高十连测 Day1
第一天的提高模拟测考前特意睡了20min 还是歇菜了,果然自己菜是真实的. 题目质量海星但是我都不会这是真的...题目由于是花钱买的这里就不放了 LINK:problem 熟悉我的人应该都知道账号 ...
MySQL InnoDB技术内幕：内存管理、事务和锁
前面有多篇文章介绍过MySQL InnoDB的相关知识,今天我们要更深入一些,看看它们的内部原理和机制是如何实现的. 一.内存管理我们知道,MySQl是一个存储系统,数据最后都写在磁盘上.我们以前也 ...
谈谈Spring中都用到了那些设计模式?
以下文章来源于微信公众号JavaGuide ,作者:JavaGuide JDK 中用到了那些设计模式?Spring 中用到了那些设计模式?这两个问题,在面试中比较常见.我在网上搜索了一下关于 Spri ...

JavaScript 空间坐标