Element.scrollLeft - Web API 接口参考 编辑

Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。

注意如果这个元素的内容排列方向（direction） 是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为0。此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数。

在使用显示比例缩放的系统上，scrollLeft 可能会是一个小数。

语法

//获取滚动条到元素左边的距离
var sLeft = element.scrollLeft;

sLeft是一个整数，代表元素滚动条距离元素左边多少像素。

//设置滚动条滚动了多少像素
element.scrollLeft = 10;

scrollLeft 可以是任意整数，然而：

• 如果元素不能滚动（比如：元素没有溢出），那么scrollLeft 的值是0。
• 如果给scrollLeft 设置的值小于0，那么scrollLeft 的值将变为0。
• 如果给scrollLeft 设置的值大于元素内容最大宽度，那么scrollLeft 的值将被设为元素最大宽度。

示例

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 #ccc;
  overflow-x: scroll;
}

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

JavaScript

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

button.onclick = function () {
  document.getElementById('container').scrollLeft += 20;
};

结构

规范

浏览器兼容

BCD tables only load in the browser

参见

• MSDN's Measuring Element Dimension and Location
• Element.scrollTop
• Element.scrollTo()