<- element.scrollHeight element.scrollTop ->

HTML DOM scrollLeft 属性

实例

滑动滚动条，获取元素滚动条到元素左边或顶部的距离:

const element = document.getElementById("myDIV"); let x = elmnt.scrollLeft; let y = elmnt.scrollTop;

定义和用法

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

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

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

浏览器支持

属性
scrollLeft	Yes	Yes	Yes	Yes	Yes

语法

获取 scrollLeft 属性值：

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

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

设置 scrollLeft 属性值：

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

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

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

技术细节

返回值：	返回一个整数，表示该元素内容水平滚动的像素数。

实例

设置 ID 为 "myDIV" 元素水平方向滚动 50 像素，垂直方向滚动 10 像素:

const element = document.getElementById("myDIV"); element.scrollLeft = 50; element.scrollTop = 10;

尝试一下 »

实例

设置 ID 为 "myDIV" 元素在每次点击按钮时水平方向滚动 50 像素，垂直方向滚动 10 像素：

var elmnt = document.getElementById("content"); function getFunction() { var x = elmnt.scrollWidth; var y = elmnt.scrollHeight; } function setFunction() { elmnt.style.height = y.scrollHeight + "px"; elmnt.style.width = y.scrollWidth + "px"; }