JavaScript Element scrollLeft 属性

scrollLeft属性设置或返回元素内容水平滚动的像素数。

提示：使用scrollTop属性设置或返回元素内容垂直滚动的像素数。

提示：要将滚动条添加到元素，请使用CSS overflow属性。

实例：

获取<div>元素的内容水平和垂直滚动的像素数：

var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
属性
scrollLeft	支持	支持	支持	支持	支持

语法

返回scrollLeft属性：

element.scrollLeft

设置scrollLeft属性：

element.scrollLeft = pixels

属性值

属性	类型	描述
pixels	Number	指定元素内容水平滚动的像素数。特别说明：如果该数字为负值，则该数字设置为“0” 如果无法滚动元素，则数字设置为“0” 如果该数字大于允许的最大滚动量，则将该数字设置为最大数量

技术细节

项目	描述
返回值：	一个数字，表示元素内容已水平滚动的像素数
DOM版本	TEST

更多例子

将<div>元素的内容滚动到水平50像素和垂直10像素：

var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;

尝试一下

滚动<div>元素的内容BY 50个水平像素和10个垂直像素：

var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;

尝试一下

将<body>的内容水平滚动30像素，垂直滚动10像素：

var body = document.body; // Safari
var html = document.documentElement; // chrome、firefox、ie和opera将溢出放在<html>级别，除非另有规定。因此，我们对这些浏览器使用documentElement属性
body.scrollLeft += 30;
body.scrollTop += 10;
html.scrollLeft += 30;
html.scrollTop += 10;

尝试一下