原创作品,转载需得到原作者书面许可,同时保留原作者和出处,否则将追究法律责任。
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
鲁公网安备 37021302000666号
关于我们
|手机版|小黑屋|
Copyright © 2012-2020 Design: 蚂蚁部落
最新评论