轻松上手,快乐学习!
HTML CSS JAVASCRIPT SQL PYTHON MYSQL PHP GIT 问答 工具 导航 更多 实例 参考

HTML DOM scrollLeft 属性

实例

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

var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
亲自试一试 »

页面下方有更多实例。

定义和用法

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

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

提示: 要向元素添加滚动条，请使用 CSS overflow 属性。

浏览器支持

属性
scrollLeft Yes Yes Yes Yes Yes

语法

返回 scrollLeft 属性:

element.scrollLeft

设置 scrollLeft 属性:

element.scrollLeft = pixels

属性值

值 描述
pixels 指定元素内容水平滚动的像素数。

特别说明:
  • 如果该数字为负值，则该数字设置为 "0"
  • 如果无法滚动该元素，则将数字设置为 "0"
  • 如果该数字大于允许的最大滚动量，则该数字将设置为最大数字

技术细节

返回值: 一个数字， 表示元素内容水平滚动的像素数

更多实例

实例

将 <div> 元素的内容水平滚动至50像素，垂直滚动至10像素:

var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;
亲自试一试 »

实例

将 <div> 元素的内容水平滚动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 and Opera places the overflow at the <html> level, unless else is specified. Therefore, we use the documentElement property for these browsers
body.scrollLeft += 30;
body.scrollTop += 10;
html.scrollLeft += 30;
html.scrollTop += 10;
亲自试一试 »