【筆記】(javascript) HTML element的scrollTop, scrollLeft值無法變更?－橘子亂說話

很多人在開發網頁時會需要讓元件有捲動的效果而使用元件的scrollTop, scrollLeft屬性來控制元件捲動的位置，不過你可能會發生這兩個屬性無法變更的情況

例如當我們設定 :

document.getelementbyid("element_id").scrollTop = 10 ;
console.log(document.getelementbyid("element_id").scrollTop) ;

這裡 console.log 顯示的結果在理想情況會是10，不過實際卻為0，這是因為元件的 overflow 的屬性為hidden，

導致元件的大小超出頁面時不會有scroll的效果，所以scrollTop 的值恆為0，因此解法如下 :

1. 使用css，設定overflow

<div style="overflow : scroll"></div>
or
<div style="overflow : auto"></div>

2. 使用jQuery更改overflow

$("element_id").scrollLeft(100);
or
document.getelementbyid("element_id").scrollTop = 10 ;

3. 特殊情況

當網頁顯示大小不為100%時(Ex. Chome上使用ctrl + 滑鼠滾論更改顯示大小) 也可能導致scrollTop或scrollLeft無法變更, 只要調回100%就可以正常行為囉~

橘子亂說話

橘子亂說話發表在痞客邦留言(0) 人氣()

E-mail轉寄

橘子亂說話