JavaScript 空間坐標
- 2020 年 8 月 19 日
- 筆記
- javascript
基礎知識
首先參考畫布分為視口（窗口）與文檔的含義
網頁很多都是多屏，所以文檔尺寸一般大於視口尺寸
視口尺寸不包括瀏覽器工具條、菜單、標籤、狀態欄等
當打開控制台後，視口尺寸相應變小
文檔像
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>
