本篇文章给大家分享的内容是浅析手机滑动插件--iscroll.js,有着一定的参考价值,有需要的朋友可以参考一下

话不多说,直接上代码:

//实例化滚动插件 var myScroll = new IScroll('#wrapper', {scrollX: true, freeScroll: true});//实例化 myScroll.scrollToElement('.active',true,true);//特定元素居中

不知道大神是怎么做的 ,我是这样计算宽度的–

//计算需要滚动盒子的宽度 var wrapper = $("#wrapper"); wrapper.find("ul").width((wrapper.find("li").length + 1) * wrapper.find("li").width());

完整实例

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>HTML5 横向滚动</title> <script src=""></script> <script src=""></script> <style> p{ width:80%; margin: 50px auto; border: 1px solid seagreen; overflow: hidden; } ul{ margin: 0; padding: 0; list-style: none; overflow: hidden; } li{ padding: 15px 0; float: left; list-style: none; width: 100px;margin: 10px; text-align: center; background: rosybrown } li.active{ background: red; } </style></head><body><p class="wrapper"><ul> <li>第1个</li> <li>第2个</li> <li>第3个</li> <li>第4个</li> <li>第5个</li> <li class="active">第6个</li> <li>第7个</li></ul></p><script> var ele = $("ul"); ele.width((ele.find("li").length + 1) * (ele.find("li").width()+20)); var myScroll = new IScroll('p', {scrollX: true, scrollY: false}); myScroll.scrollToElement('.active',true,true);</script></body></html>

相关推荐: