# 遇到的問題與原因
使用 Intersection Observer 來實現滾動到對應數字時選擇該數字
一開始用 padding 來調整 root element 的可視範圍在 Edge 上一切正常
然而當使用 Firefox 進行測試時卻遇到異常
檢查後發現在 Firefox 時回傳的 entries 會有 1 個以上 isIntersecting 的物件
Firefox 的觀察範圍比其他瀏覽器都還要大
搜尋了相關 Issue 後找到這篇
Intersection Observer: padding changes 'boundaries' of root element? (opens new window)
做了些許測試後得出以下結論
當 IntersectionObserver 的 root 有 padding 時
- Chrome/Edge/Safari: 會以 content 作為觀察範圍
- Firefox: 會以 padding + content 作為觀察範圍
# CodePen Example
https://codepen.io/clipwww/pen/Poexxar (opens new window)
root box (h: 300px, padding: 100px)
# Chrome: 以 content 作為觀察範圍
完全進入 content 才會變綠色
# Firefox: 以 padding + content 作為觀察範圍
還沒完全進入 content ，但已經完全進入 padding 範圍，就變綠色了
# 解法
- root element 不要有 padding 避免不同瀏覽器行為不一致
- 用
rootMargin去調整觀察範圍，需要縮小時就用負數