JavaScript 空間坐標(biāo)的使用
基礎(chǔ)知識(shí)
首先參考畫布分為視口（窗口）與文檔的含義
網(wǎng)頁(yè)很多都是多屏，所以文檔尺寸一般大于視口尺寸
視口尺寸不包括瀏覽器工具條、菜單、標(biāo)簽、狀態(tài)欄等
當(dāng)打開(kāi)控制臺(tái)后，視口尺寸相應(yīng)變小
文檔像 position 定位，視口類似 fixed 定位
文檔坐標(biāo)在頁(yè)面滾動(dòng)時(shí)不發(fā)生改變
視口坐標(biāo)的操作需要考慮滾動(dòng)條的位置
視口文檔
視口坐標(biāo)需要知道滾動(dòng)條位置才可以進(jìn)行計(jì)算，有以下幾種方式獲取滾動(dòng)位置
| 方法 | 說(shuō)明 | 注意 |
| window.innerWidth | 視口寬度 | 包括滾動(dòng)條（不常用） |
| window.innerHeight | 視口高度 | 包括滾動(dòng)條（不常用） |
| document.documentElement.clientWidth | 視口寬度 | |
| document.documentElement.clientHeight | 視口高度 |
注意，均是以像素為單位，且視口尺寸不包括瀏覽器工具條、菜單、標(biāo)簽、狀態(tài)欄等
<script> document.write(document.documentElement.clientWidth); // 1707 document.write(document.documentElement.clientHeight) // 803 </script>
幾何形狀
元素在頁(yè)面中擁有多個(gè)描述幾何數(shù)值的尺寸，下面截圖進(jìn)行了形象的描述。
| 方法 | 說(shuō)明 | 備注 |
|---|---|---|
| element.getBoundingClientRect | 返回元素在視口坐標(biāo)及元素大小，不包括外邊距，width/height與offsetWidth/offsetHeight匹配 | 窗口坐標(biāo) |
| element.getClientRects | 行級(jí)元素每行尺寸位置組成的數(shù)組 | |
| element.offsetParent | 擁有定位屬性的父級(jí)，或body/td/th/table | 對(duì)于隱藏元素/body/html值為null |
| element.offsetWidth | 元素寬度尺寸，包括內(nèi)邊距與邊框和滾動(dòng)條 | |
| element.offsetHeight | 元素高度尺寸，包括內(nèi)邊距與邊框和滾動(dòng)條 | |
| element.offsetLeft | 相對(duì)于祖先元素的X軸坐標(biāo) | |
| element.offsetTop | 相對(duì)于祖先元素的Y軸坐標(biāo) | |
| element.clientWidth | 元素寬度，不包含邊框，只包含內(nèi)容和內(nèi)邊距，行元素尺寸為0 | |
| element.clientHeight | 元素高度，不包含邊框，只包含內(nèi)容和內(nèi)邊距，行元素尺寸為0 | |
| element.clientLeft | 內(nèi)容距離外部的距離，滾動(dòng)條在左側(cè)時(shí)包括滾動(dòng)條尺寸 | |
| element.clientTop | 內(nèi)容距離頂部的距離，滾動(dòng)條在頂部時(shí)包括滾動(dòng)條尺寸 | |
| element.scrollWidth | 元素寬度，內(nèi)容+內(nèi)邊距+內(nèi)容溢出的尺寸 | |
| element.scrollHeight | 元素高度，內(nèi)容+內(nèi)邊距+內(nèi)容溢出的尺寸 | |
| element.scrollLeft | 水平滾動(dòng)條左側(cè)已經(jīng)滾動(dòng)的寬度 | |
| element.scrollTop | 垂直滾動(dòng)條頂部已經(jīng)滾動(dòng)的高度 |
為什么不要使用getComputedStyle
尺寸設(shè)置 auto 時(shí)獲取結(jié)果不可用
由于滾動(dòng)條的存在，不同瀏覽器返回結(jié)果不同
元素沒(méi)有設(shè)置尺寸獲取不到
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>
計(jì)算結(jié)果的矩形尺寸不包括外邊距
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>網(wǎng)頁(yè)很多都是多屏，所以文檔尺寸一般大于視口尺寸,當(dāng)打開(kāi)控制臺(tái)后，視口尺寸相應(yīng)變小。網(wǎng)頁(yè)很多都是多屏，所以文檔尺寸一般大于視口尺寸,當(dāng)打開(kāi)控制臺(tái)后，視口尺寸相應(yīng)變小。網(wǎng)頁(yè)很多都是多屏，所以文檔尺寸一般大于視口尺寸,當(dāng)打開(kāi)控制臺(tái)后，視口尺寸相應(yīng)變小。</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
坐標(biāo)判斷
Js 提供了方法獲取指定坐標(biāo)上的元素，如果指定坐標(biāo)點(diǎn)在視口外，返回值為 null
坐標(biāo)都是從左上角計(jì)算，這與 CSS 中的 right/bottom 等不同
窗口坐標(biāo)類似于 position:fixed
文檔坐標(biāo)類似于 position:absolute
| 方法 | 說(shuō)明 |
|---|---|
| element.elementsFromPoint | 返回指定坐標(biāo)點(diǎn)所在的元素集合 |
| element.elementFromPoint | 返回指定坐標(biāo)點(diǎn)最頂級(jí)的元素 |
元素集合
返回指定坐標(biāo)點(diǎn)上的元素集合
<!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>
頂級(jí)元素
返回坐標(biāo)點(diǎn)上的頂級(jí)元素
<!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>
滾動(dòng)控制
| 方法 | 說(shuō)明 | 參數(shù)說(shuō)明 |
|---|---|---|
| window.pageXOffset | 文檔相對(duì)窗口水平滾動(dòng)的像素距離 | |
| window.pageYOffset | 文檔相對(duì)窗口垂直滾動(dòng)的像素距離 | |
| element.scrollLeft() | 元素X軸滾動(dòng)位置 | |
| element.scrollTop() | 元素Y軸滾動(dòng)位置 | |
| element.scrollBy() | 按偏移量進(jìn)行滾動(dòng)內(nèi)容 | 參數(shù)為對(duì)象，{top:垂直偏移量,left:水平偏移量,behavior:'滾動(dòng)方式'} |
| element.scroll() 或 element.scrollTo() | 滾動(dòng)到指定的具體位置 | 參數(shù)為對(duì)象，{top:X軸文檔位置,left:Y軸文檔位置,behavior:'滾動(dòng)方式'} |
| element.scrollLeft | 獲取和設(shè)置元素X軸滾動(dòng)位置 | 這是屬性，設(shè)置X軸文檔位置 |
| element.scrollTop | 獲取和設(shè)置元素Y軸滾動(dòng)位置 | 這是屬性，設(shè)置Y軸文檔位置 |
| element.scrollIntoView(bool) | 定位到頂部或底部 | 參數(shù)為true元素定位到頂部，為false定位到窗口底部 |
使用 scrollBy 滾動(dòng)文檔
<!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); // 相當(dāng)于每個(gè)3秒往下走30px，參照于上次所停留位置，smooth平滑滾動(dòng)
},3000);
</script>
</html>
使用 scroll 滾動(dòng)到指定位置
<!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); // 按照絕對(duì)位置，距離上部30px，只走一次，smooth平滑滾動(dòng)
</script>
</html>
使用元素 scrollIntoView 方法實(shí)現(xiàn)滾動(dòng)操作，參數(shù)可以是布爾值或?qū)ο蟆?/p>
與 <a> 標(biāo)簽錨點(diǎn)效果類似。
參數(shù)為 true 時(shí)頂部對(duì)齊，相當(dāng)于 {block: "start"}
參數(shù)為 false 時(shí)底部對(duì)齊，相當(dāng)于 {block: "end"}
定義 {behavior:smooth} 為平滑滾動(dòng)
<!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>
到此這篇關(guān)于JavaScript 空間坐標(biāo)的文章就介紹到這了,更多相關(guān)JavaScript 空間坐標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算)
- 如何利用js根據(jù)坐標(biāo)判斷構(gòu)成單個(gè)多邊形是否合法
- JavaScript offset實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)
- JavaScript使用canvas繪制坐標(biāo)和線
- JavaScript實(shí)現(xiàn)捕獲鼠標(biāo)坐標(biāo)
- js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實(shí)現(xiàn)方法示例
- JS圖形編輯器場(chǎng)景坐標(biāo)視口坐標(biāo)的相互轉(zhuǎn)換
相關(guān)文章
基于JS實(shí)現(xiàn)無(wú)縫滾動(dòng)思路及代碼分享
無(wú)縫滾動(dòng)效果在各大網(wǎng)站都有這樣的需求，應(yīng)用非常廣泛，下面小編給大家分享基于JS實(shí)現(xiàn)無(wú)縫滾動(dòng)思路及代碼，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-06-06
微信小程序 scroll-view 水平滾動(dòng)實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了微信小程序 scroll-view 水平滾動(dòng)實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了JavaScript每天定時(shí)更換皮膚樣式的方法,涉及javascript針對(duì)時(shí)間及css樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了JavaScript的setter與getter方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
快速查找數(shù)組中的某個(gè)元素并返回下標(biāo)示例
最近在寫jquery的combobox插件時(shí)遇到效率問(wèn)題，再加上jquery選擇器的類帥選，導(dǎo)致效率很慢，采用以下方式二，可以輕松解決此問(wèn)題2013-09-09
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)左滑刪除效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
JS控制文本框textarea輸入字?jǐn)?shù)限制的方法
JS控制文本框textarea輸入字?jǐn)?shù)限制的方法，需要的朋友可以參考一下2013-06-06
JavaScript實(shí)現(xiàn)圖片局部放大鏡交互功能
在網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)中,圖片局部放大鏡交互功能是一個(gè)常見(jiàn)的需求,它可以增強(qiáng)用戶體驗(yàn),讓用戶更仔細(xì)地查看圖片的細(xì)節(jié),本文將介紹如何使用JavaScript來(lái)實(shí)現(xiàn)這一功能,以及提供代碼示例和詳細(xì)解釋,需要的朋友可以參考下2023-10-10
JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法
這篇文章主要介紹了JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法,分別用js與jQuery兩種方式加以實(shí)現(xiàn),是非常實(shí)用的特效技巧,需要的朋友可以參考下2014-11-11
得到form下的所有的input的方法有很多，在本文為大家介紹下使用form 的集合對(duì)象elements,從而得到value，需要的朋友可以參考下2013-11-11