原创作品，转载需得到原作者书面许可，同时保留原作者和出处，否则将追究法律责任。
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.softwhy.com/" /> <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>
代码运行效果截图如下：
由于box元素元素没有出现横向滚动条，所以无所谓scroll滚动。
所以scrollLeft属性返回值始终为0。
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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.softwhy.com</div> </div> </body> </html>
上述代码可以设置box元素内容向左滚动50px。
代码运行效果截图如下：
需要有两点需要特别注意：
（1）.设置的值是一个数字，不能是带有单位的字符串，返回值也是如此。
（2）.不要误认为内容向左滚动的尺寸，就是上图中标出滚动条处的尺寸，图中距离仅具有标识意义。
上面的代码效果都是静态的，下面再分享一个动态效果，更加有利于理解。
代码实例如下：
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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属性的演示，非常不完善。
可以线上实用的无缝滚动效果可以参阅JavaScript图片横向无缝滚动详解一章节。
相关阅读：
（1）.关于innerHTML属性可以参阅JavaScript innerHTML一章节。
（2）.关于setInterval方法可以参阅JavaScript setInterval一章节。
前端教程
HTML5 API
|手机版|小黑屋|
( 鲁ICP备10022556号-3 )
鲁ICP备10022556号-3
Copyright © 2012-2018 Design: 蚂蚁部落
最新评论