JavaScript scrollLeft

小灰灰 2020-06-01 16:46 287阅读 0赞

# JavaScript scrollLeft

scrollLeft属性可以返回或者设置元素内容向左滚动的尺寸。

也就是被元素左侧所遮挡的尺寸，或者说滚动条向右滚动的距离。

返回或者设置的值都是数字，不能带单位，默认单位是像素。

此属性相当有用，比如可以用来制作水平无缝滚动效果，后面会有简单演示。

语法结构：

```javascript
dom.scrollLeft
```

**浏览器支持:**

（1）.IE浏览器支持此属性。

（2）.edge浏览器支持此属性。

（2）.谷歌浏览器支持此属性。

（3）.火狐浏览器支持此属性。

（4）.opera浏览器支持此属性。

（5）.safria浏览器支持此属性。

**代码实例如下:**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
#box{
  width:200px;
  height:100px;
  background-color:green;
  margin:0px auto;
  overflow:auto;
}
#inner{
  width:180px;
  height:30px;
  text-align:center;
  margin-top:20px;
  background-color:#ccc;
}
</style>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let oinner=document.getElementById("inner");
  oinner.innerHTML=obox.scrollLeft;
}
</script> 
</head>
<body> 
<div id="box">
  <div id="inner"></div>
</div>
</body>
</html>
```

代码运行效果截图如下：

![](/images/1591030076447.png)

由于box元素元素没有出现横向滚动条，所以无所谓scroll滚动。

所以scrollLeft属性返回值始终为0。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
#box{
  width:200px;
  height:100px;
  background-color:green;
  margin:0px auto;
  overflow:auto;
}
#inner{
  width:380px;
  height:20px;
  text-align:center;
  margin-top:20px;
  background-color:#ccc;
}
</style>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let oinner=document.getElementById("inner");
  obox.scrollLeft=50;
}
</script> 
</head>
<body> 
<div id="box">
  <div id="inner">本站url地址是www.dandelioncloud.cn</div>
</div>
</body>
</html>
```

上述代码可以设置box元素内容向左滚动50px。

需要有两点需要特别注意：

（1）.设置的值是一个数字，不能是带有单位的字符串，返回值也是如此。

（2）.不要误认为内容向左滚动的尺寸，就是上图中标出滚动条处的尺寸，图中距离仅具有标识意义。

上面的代码效果都是静态的，下面再分享一个动态效果，更加有利于理解。

代码实例如下：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
#box{
  width:200px;
  height:100px;
  background-color:green;
  margin:0px auto;
  overflow:auto;
}
#inner{
  width:600px;
  height:30px;
  margin-top:20px;
  background-color:red;
}
</style>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let oinner=document.getElementById("inner");
  function done(){obox.scrollLeft++;}
  setInterval(done,10);
}
</script> 
</head>
<body> 
<div id="box">
  <div id="inner">蒲公英云欢迎您，只有奋斗才会有美好的未来</div>
</div>
</body>
</html>
```

上述代码实现了box内容自动向左滚动效果，代码分解如下：

```javascript
let obox=document.getElementById("box");
let oinner=document.getElementById("inner");
```

获取对应的两个div元素对象，后面会用到。

```javascript
function done(){obox.scrollLeft++;}
```

每调用一次此方法，外层div元素的scrollLeft属性值加1。

也就是外层div元素内容向左滚动1px。

最后通过定时器方法setInterval每隔10毫秒调用一次done函数。

那么就在视觉上形成了不间断滚动效果，这也是当前线上大多数水平无缝滚动效果的原理。

当然上述代码仅仅是一个简单的对scrollLeft属性的演示，非常不完善。

可以线上实用的无缝滚动效果。