很多人在開發網頁時會需要讓元件有捲動的效果而使用元件的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%就可以正常行為囉~

 





arrow
arrow
    文章標籤
    javascript html css
    全站熱搜

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

    E-mail轉寄