Element：scrollLeft 屬性

值

一個雙精度浮點數值，表示元素當前水平滾動的畫素數。正值表示元素向右滾動（以顯示更多右側內容）。如果元素根本不向左或向右滾動，則 scrollLeft 為 0。如果文件不是活動文件，則返回值是 0。如果文件在亞畫素精度裝置上渲染，則返回值也具有亞畫素精度，可能包含小數部分。

如果元素可以從初始包含塊向左滾動，則 scrollLeft 可能為負值。例如，如果元素的 direction 是 rtl（從右到左），並且內容向左增長，那麼當捲軸處於最右側位置（滾動內容的開頭）時，scrollLeft 為 0，然後隨著您向內容末尾滾動，該值將變得越來越負。

Safari 會透過更新 scrollLeft 超出最大滾動位置來響應過度滾動（除非停用了預設的“反彈”效果，例如透過將 overscroll-behavior 設定為 none），而 Chrome 和 Firefox 則不會。

可以設定 scrollLeft 屬性，這將導致元素滾動到指定的水平位置，其方式與使用 Element.scroll() 並設定 behavior: "auto" 相同。

示例

HTML

<div id="container">
  <div id="content">Click the button to slide right!</div>
</div>

<button id="slide" type="button">Slide right</button>

CSS

#container {
  width: 100px;
  height: 100px;
  border: 1px solid #cccccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #cccccc;
}

JavaScript

const button = document.getElementById("slide");

button.onclick = () => {
  document.getElementById("container").scrollLeft += 20;
};

結果

規範

瀏覽器相容性

另見

• 確定元素的尺寸
• HTMLElement.offsetLeft
• Element.clientLeft
• Element.scrollHeight
• Element.scrollWidth
• Element.scrollTop
• Element.getBoundingClientRect()
• Element.scrollTo()