Element.scrollLeft

在此页

句法
范例
规范
浏览器兼容性
另请参阅
相关话题

Element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled from its left edge.

If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position (at the start of the scrolled content), and then increasingly negative as you scroll towards the end of the content.

On systems using display scaling, scrollLeft may give you a decimal value.

句法

Getting the value

// Get the number of pixels scrolled
var sLeft = element.scrollLeft;

sLeft is an integer representing the number of pixels that element has been scrolled from the left edge.

Setting the value

// Set the number of pixels scrolled
element.scrollLeft = 10;

scrollLeft can be specified as any integer value. However:

If the element can't be scrolled (e.g., it has no overflow), scrollLeft 被设为 0 .
If specified as a value less than 0 (greater than 0 for right-to-left elements), scrollLeft 被设为 0 .
If specified as a value greater than the maximum that the content can be scrolled, scrollLeft is set to the maximum.

范例

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

结果

规范

规范	状态	注释
CSSOM (CSS 对象模型) 视图模块 The definition of 'scrollLeft' in that specification.	工作草案

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`scrollLeft`	Chrome 43 43 For right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 721759 .	Edge 12 12 From Edge 79, for right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 721759 . Before Edge 79, for right-to-left elements, this property uses 100-0 (most left to most right) instead of negative values.	Firefox 1	IE 8 8 For right-to-left elements, this property uses 100-0 (most left to most right) instead of negative values.	Opera 8	Safari 6	WebView Android 43 43 For right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 721759 .	Chrome Android 43 43 For right-to-left elements, this property uses 0-100 (most left to most right) instead of negative values. See bug 721759 .	Firefox Android 4	Opera Android 10.1	Safari iOS 6	Samsung Internet Android 4.0

在此页

句法

Getting the value

Setting the value

范例

HTML

CSS

JavaScript

结果

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题