🔰coordinates

browser ⟩ concepts ⟩ coordinate system

There are 3 different coordinate systems:

• document coordinates

• viewport coordinates - also called "window coordinates".

• container coordinates - relatively positioned container with top/left = 0.

⭐️ 重點

client-side JavaScript tends to use viewport coordinates:

• elem.getBoundingClientRect() (DOMRect) size and position (relative to viewport).

• document.elementFromPoint() topmost Element at specified coordinates (relative to viewport).

• mouseEvent/touch.clientX, mouseEvent/touch.clientY

👉 window window scrolling

window.scrollTo() takes the x and y coordinates in document coordinates.

👉 CSS CSS positioning

"position"   "top/left" relative to               removed from flow
-----------------------------------------------------------------------
fixed        `viewport`                                  ✅ 
relative     where it should be                          ❌ 
absolute     `document` / nearest positioned parent      ✅ 

🔴 主題

• box models

• relative to document coordinates

  • viewport position: (.scrollX, .scrollY)

  • elem.position() - element's position.

  • absolutely positioned elements.

• relative to viewport coordinates

  • .boundingBox of Element

  • doc.elementFromPoint()

  • fixed elements.

• document size

• .paddingBox / .borderBox / .scrollBox

• CSS positioning

• window scrolling

📗 參考

• JavaScript: The Definitive Guide (15.5 Document Geometry & Scrolling)

• JS.info ⟩

  • Coordinates

  • Element size and scrolling

  • Window sizes and scrolling

📘 手冊

• Document ⟩ .elementFromPoint()

• Element ⟩ .getBoundingClientRect()

• MouseEvent, Touch ⟩ .clientX, .clientY

• CSS ⟩

  • width, height

  • Box Model ⟩ border area

👥 相關

• box models

  • .paddingBox / .borderBox / .scrollBox / viewport / .boundingBox

• CSS positioning

• window scrolling