HTML DOM scrollLeft 屬性

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

實例

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

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

嚐試一下 »

定義和用法

scrollLeft 屬性可以讀取或設置元素滾動條到元素左邊的距離。

注意如果這個元素的內容排列方向(direction)是rtl (right-to-left) ,那麼滾動條會位於最右側(內容開始處),並且scrollLeft值為 0。此時,當你從右到左拖動滾動條時,scrollLeft 會從 0 變為負數。

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


瀏覽器支持

屬性
scrollLeft Yes Yes Yes Yes Yes

語法

獲取 scrollLeft 屬性值:

// 獲取滾動條到元素左邊的距離
var sLeft = element.scrollLeft 

sLeft 是一個整數,代表元素滾動條距離元素左邊多少像素。

設置 scrollLeft 屬性值:

// 設置滾動條滾動了多少像素
element.scrollLeft = pixels

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

  • 如果元素不能滾動(比如:元素沒有溢出),那麼 scrollLeft 的值是 0。
  • 如果給 scrollLeft 設置的值小於 0,那麼 scrollLeft 的值將變為 0。
  • 如果給scrollLeft 設置的值大於元素內容最大寬度,那麼 scrollLeft 的值將被設為元素最大寬度。

技術細節

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

更多實例

實例

設置 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"; }

嚐試一下 »


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