本文將透過圖解的方式說明CSSOM View Model中Element定義的屬性,包含scrollLeft、scrollTop、scrollWidth、scrollHeight和scrollIntoView。

JavaScript中可以由Element的DOM物件中使用scrollLeft、scrollTop、scrollWidth和scrollHeight的屬性,這些屬性的意義可以用下面這張圖說明:

box  

scrollWidth

唯讀。表示Element內容物實際上的寬度,scrollWidth大於等於clientWidth。

scrollHeight

唯讀。表示Element內容物實際上的高度,scrollHeight大於等於clientHeight。

scrollLeft

表示內容物捲動到的水平位置,由上圖可知表示可視區左邊界與內容物左邊界的距離;當捲軸在左邊時(由右至左書寫),則為可視區右邊界與內容物右邊界的距離。可透過修改此屬性來捲動。

scrollTop

表示內容物捲動到的垂直位置,由上圖可知表示可視區上邊界與內容物上邊界的距離。可透過修改此屬性來捲動。

除此之外還有scrollIntoView的函式:

scrollIntoView(top)

將卷軸捲動到這個Element的位置。

top

是否對齊上方,預設為true。

可用下面兩張圖表示:

scrollIntoView()
scrollIntoView  

scrollIntoView(false)
  scrollIntoView_false  

延伸閱讀

圖解clientLeft, clientTop, clientWidth和clientHeight

圖解offsetLeft、offsetTop、offsetWidth和offsetHeight

文章標籤
創作者介紹

小殘的程式光廊

emn178 發表在 痞客邦 PIXNET 留言(0) 人氣()