本篇文章给大家分享的内容是浅析手机滑动插件--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="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script src="http://cdn.bootcss.com/iScroll/5.2.0/iscroll.js"></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>相关推荐：
以上就是浅析手机滑动插件—iscroll.js的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
777
