HTML DOM Element scrollLeft 属性

定义和用法

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

另请参阅：

scrollTop 属性

CSS overflow 属性

onscroll 事件

实例

例子 1

获取滚动 "myDIV" 的内容的像素数：

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

亲自试一试

例子 2

将 "myDIV" 的内容水平滚动到 50 像素，垂直滚动到 10 像素：

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

亲自试一试

例子 3

将 "myDIV" 的内容水平滚动 50 像素，垂直滚动 10 像素：

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

亲自试一试

例子 4

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

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

亲自试一试

语法

返回 scrollLeft 属性：

element.scrollLeft

设置 scrollLeft 属性：

element.scrollLeft = pixels

属性值

值 描述
pixels

元素内容水平滚动的像素数。

  • 如果该数字为负数，则该数字设置为 0。
  • 如果元素无法滚动，则该数字设置为 0。
  • 如果该数大于允许的最大值，则将该数设置为最大值。

返回值

类型 描述
数字 元素内容水平滚动的像素数。

浏览器支持

所有浏览器都支持 element.scrollLeft：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持