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";
}
尝试一下 »