Element.scrollLeft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。
注意如果这个元素的内容排列方向（direction）是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为 0。此时，当你从右到左拖动滚动条时，scrollLeft 会从 0 变为负数。
警告：
在使用显示比例缩放的系统上，scrollLeft 可能会是一个小数。
值
scrollLeft 可以是任意整数，然而：
- 如果元素不能滚动（比如：元素没有溢出），那么
scrollLeft的值是 0。 - 如果给
scrollLeft设置的值小于 0，那么scrollLeft的值将变为 0。 - 如果给
scrollLeft设置的值大于元素内容最大宽度，那么scrollLeft的值将被设为元素最大宽度。
示例
HTML
html
<div id="container">
<div id="content">Click the button to slide right!</div>
</div>
<button id="slide" type="button">Slide right</button>
CSS
css
#container {
width: 100px;
height: 100px;
border: 1px solid #ccc;
overflow-x: scroll;
}
#content {
width: 250px;
background-color: #ccc;
}
JavaScript
js
const button = document.getElementById("slide");
button.onclick = function () {
document.getElementById("container").scrollLeft += 20;
};
结构
规范
| Specification |
|---|
| CSSOM View Module # dom-element-scrollleft |
浏览器兼容性
Loading…