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()