HTML DOM scrollTop 屬性

元素對象參考手冊 元素對象

實例

滑動滾動條,獲取元素滾動條到元素左邊或頂部的距離:

const element = document.getElementById("myDIV"); let x = elmnt.scrollLeft; let y = elmnt.scrollTop;

嚐試一下 »

定義和用法

scrollTop 屬性可以獲取或設置一個元素的內容垂直滾動的像素數。

一個元素的 scrollTop 值是這個元素的內容頂部(卷起來的)到它的視口可見內容(的頂部)的距離的度量。當一個元素的內容沒有產生垂直方向的滾動條,那麼它的 scrollTop 值為0。

在使用顯示比例縮放的係統上,scrollTop 可能會提供一個小數。


瀏覽器支持

屬性
scrollTop Yes Yes Yes Yes Yes

語法

獲取 scrollTop 屬性值:

// 獲得滾動的像素數
var intElemScrollTop = element.scrollTop 

intElemScrollTop 是一個整數,即element的內容向上滾動的像素數。

設置 scrollLeft 屬性值:

// 設置滾動的距離
element.scrollTop = intValue;

scrollTop 可以是任意整數,然而:

  • 如果一個元素不能被滾動(例如,它沒有溢出,或者這個元素有一個 "non-scrollable" 屬性), scrollTop 將被設置為 0
  • 設置 scrollTop的值小於 0,scrollTop 被設為 0
  • 如果設置了超出這個容器可滾動的值,scrollTop 會被設為最大值。

技術細節

返回值: 返回一個整數,表示該元素內容垂直滾動的像素數。

更多實例

實例

設置 ID 為 "myDIV" 元素水平方向滾動 50 像素,垂直方向滾動 10 像素:

const element = document.getElementById("myDIV"); element.scrollLeft = 50; element.scrollTop = 10;

嚐試一下 »

實例

設置 ID 為 "myDIV" 元素在每次點擊按鈕時水平方向滾動 50 像素,垂直方向滾動 10 像素:

var elmnt = document.getElementById("content"); function getFunction() { var x = elmnt.scrollWidth; var y = elmnt.scrollHeight; } function setFunction() { elmnt.style.height = y.scrollHeight + "px"; elmnt.style.width = y.scrollWidth + "px"; }

嚐試一下 »


元素對象參考手冊 元素對象