这篇翻译不完整。请帮忙从英语翻译这篇文章

Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。

注意如果这个元素的内容排列方向(direction) 是rtl (right-to-left) ,那么滚动条会位于最右侧(内容开始处),并且scrollLeft值为0。此时,当你从右到左拖动滚动条时,scrollLeft会从0变为负数(这个特性在chrome浏览器中不存在)。

语法

//获取滚动条到元素左边的距离
var sLeft = element.scrollLeft;

sLeft 是一个整数,代表元素滚动条距离元素左边多少像素。

//设置滚动条滚动了多少像素
element.scrollLeft = 10;

scrollLeft 可以是任意整数,然而:

  • 如果元素不能滚动(比如:元素没有溢出),那么scrollLeft 的值是0。
  • 如果给scrollLeft 设置的值小于0,那么scrollLeft 的值将变为0。
  • 如果给scrollLeft 设置的值大于元素内容最大宽度,那么scrollLeft 的值将被设为元素最大宽度。

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #container {
            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
        }
        #content {
            background-color: #ccc; width: 250px;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {   
            var button = document.getElementById('slide');
            button.onclick = function () {
                document.getElementById('container').scrollLeft += 20;
            };
        }, false);
    </script>
</head>
<body>
    <div id="container">
        <div id="content">Lorem ipsum dolor sit amet.</div>
    </div>
    <button id="slide" type="button">Slide</button>
</body>
</html> 

规范

Specification Status Comment
CSS Object Model (CSSOM) View Module
scrollLeft
Working Draft  

浏览器兼容

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) (Yes) ? ? ? ?
Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Yes) (Yes) ? ? ? ? ? (Yes)

参考

MSDN: scrollLeft Property

文档标签和贡献者

标签: 
此页面的贡献者: weiqinl, ChanShuYi
最后编辑者: weiqinl,