[前端] 元素捲動機制(scrollTop, scrollIntoView, offsetTop)

HTMLElement.offsetTop

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

Element.scrollTo

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo

Element.scrollIntoView

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

JavaScript的offset、client、scroll家族屬性

https://www.gushiciku.cn/pl/pD8z/zh-tw

在包超多層的頁面中，用scrollIntoView捲動仍有條件失效，需改用scrollTo捲動父層的scrollTop到指定top。

需注意的是，scrollTo要捲動的top值是目標元素相對於其可捲動父層的scrollTop值，通常是由目標元素的offsetTop取得，而定義上offsetTop是代表元素的上外邊框至offsetParent元素的上內邊框之間的px距離。但實際上用offsetTop取到的是鄉對於offsetParent元素的距離，而offsetParent是基於有定位的父層(無定位就是body)，所以兩者有所差異。

可通過設定父層元素style為position:relative，讓父層元素成為定位元素，則可使「可捲動父層」等同於「有定位父層」。此時，通過目標元素所取得的offsetTop，則可用於父層元素的scrollTo進行捲動顯示，並以此替代有問題的scrollIntoView功能。

#元素, 捲動, 機制, scrollTop, scrollIntoView, offsetTop