理解 DOM 座標
座標系統
在瀏覽器中有兩種座標系統 & 滑鼠座標:
1. 相對於 document
- 座標 (0, 0) 在整個頁面的最左上角。
2. 相對於 window
- 座標 (0, 0) 在可視區 Viewport 的最左上角。
3. 滑鼠座標 - 通常透過事件取得。
當頁面還沒捲動時 window 和 document 的原點 (0, 0) 與其他座標是相同的。
開始捲動後,document 的座標等於 window(viewport) 的座標加上 scroll 的位置,大部分的情況下我們會使用 document 座標系統,因為它即便 scroll 了,還是會保持一致。