JavaScript 空間座標

雲崖先生發表於2020-08-19
JavaScript

基礎知識

　　首先參考畫布分為視口（視窗）與文件的含義

　　網頁很多都是多屏，所以文件尺寸一般大於視口尺寸

　　視口尺寸不包括瀏覽器工具條、選單、標籤、狀態列等

　　當開啟控制檯後，視口尺寸相應變小

　　文件像position定位，視口類似fixed定位

　　文件座標在頁面滾動時不發生改變

　　視口座標的操作需要考慮滾動條的位置

image-20200818233432727

視口文件

　　視口座標需要知道滾動條位置才可以進行計算，有以下幾種方式獲取滾動位置

方法 說明 注意
window.innerWidth 視口寬度 包括滾動條（不常用）
window.innerHeight 視口高度 包括滾動條（不常用）
document.documentElement.clientWidth 視口寬度  
document.documentElement.clientHeight 視口高度  

　　注意，均是以畫素為單位，且視口尺寸不包括瀏覽器工具條、選單、標籤、狀態列等

<script>
        document.write(document.documentElement.clientWidth);  // 1707
        document.write(document.documentElement.clientHeight)  // 803  
</script>

幾何形狀

　　元素在頁面中擁有多個描述幾何數值的尺寸，下面截圖進行了形象的描述。

image-20200819123923375

方法說明備註
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>

相關文章