基本概念

視口坐標：相對于瀏覽器左上角或相對于框架頁<iframe>元素的坐標，不包括瀏覽器的“外殼”。

文檔坐標：相對于文檔左上角的坐標

除IE8及更早的版本，Window對象的pageXOffset和pageYOffset屬性在所有的瀏覽器中提供滾動條的位置。

IE和其他瀏覽器可以通過scrollLeft和scrollTop屬性來獲得滾動條的位置。標準模式下，通過document.documentElement來獲取這些屬性，怪異模式下，通過document.body來獲取這些屬性

Example:

//獲取滾動條偏移量 function getScrollOffsets(w){w=w||window;
　　 var d=w.document;if(w.pageXOffset!=null){return {x:w.pageXOffset,y:w.pageYOffset};}if(document.compatMode=="CSS1Compat"){ return{ x:d.documentElement.scrollLeft, y:d.documentElement.scrollTop }; } return { x:d.body.scrollLeft, y:d.body.scrollTop }; }

查詢元素的幾何尺寸

getBoundingClientRect方法，返回一個有left.right,top,bottom屬性的對象，left,top表示元素左上角的坐標，right，bottom表示元素右下角的坐標，返回元素在視口坐標的位置，返回的坐標包含元素的邊框和內邊距，不包含外邊距，非實時的，在用戶滾動或改變瀏覽器窗口大小時不會更新它們。

HTML元素的offsetLeft和offsetTop屬性也能返回元素的X和Y坐標（若該元素是已定位的子元素，則它返回相對于父元素的坐標，可通過offsetParent來獲取它的父元素）,offsetWidth和offsetHeight返回它的屏幕尺寸。

Document對象的的elementFromPoint方法返回指定位置的一個元素，傳遞x坐標和y坐標

滾動

Window對象的scrollTop()方法，接受一個點的X和Y坐標，并作為滾動條偏移量來設置他們

scrollby()和scroll()和scrollTo()類似，但是它的參數是相對的

可通過getBoundingClientRect計算元素位置，并轉換為文檔坐標，再調用scrollTo()移動到元素所在的位置。但有更簡單的辦法，scrollIntoView()，默認參數為true,放在視口的上邊緣處，設置為false時，放在視口的下邊緣處

?

轉載于:https://www.cnblogs.com/goOtter/p/9397731.html

總結

以上是生活随笔為你收集整理的JavaScript中的坐标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。