JavaScript Element scrollLeft 属性

  • 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;
    
    尝试一下