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: 340height: 330left: 18right: 348top: 10width: 330x: 18y: 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.33333396911621height: 21.33333396911621left: 8right: 1683.5555419921875top: 8width: 1675.5555419921875x: 8y: 8
// 第二行信息bottom: 50.66666793823242height: 21.33333396911621left: 8right: 264top: 29.33333396911621width: 256x: 8y: 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 空間坐標內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備