Element.scrollLeft

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;
};

结构

规范

Specification Status Comment
CSS Object Model (CSSOM) View Module
scrollLeft
Working Draft

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
scrollLeftChrome Full support 43Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 8Safari Full support 6WebView Android Full support 43Chrome Android Full support 43Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 6Samsung Internet Android Full support 4.0

Legend

Full support  
Full support

参见