View in English Always switch to English

Element.scrollLeft

基线广泛可用

自 2015年7月起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

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

注意如果这个元素的内容排列方向(direction)是rtl (right-to-left) ,那么滚动条会位于最右侧(内容开始处),并且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;
}

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

规范
CSSOM View Module # dom-element-scrollleft

此页面最后更新于 2024年9月4日,由 MDN 贡献者更新。