浅析手机滑动插件—iscroll.js

来源：动视网责编：小采时间：2020-11-27 19:54:55

浅析手机滑动插件—iscroll.js

浅析手机滑动插件—iscroll.js:本篇文章给大家分享的内容是浅析手机滑动插件--iscroll.js，有着一定的参考价值，有需要的朋友可以参考一下话不多说，直接上代码：//实例化滚动插件 var myScroll = new IScroll('#wrapper', {scrollX: true, freeScrol

推荐度：

点击下载本文 文档为doc格式

导读浅析手机滑动插件—iscroll.js:本篇文章给大家分享的内容是浅析手机滑动插件--iscroll.js，有着一定的参考价值，有需要的朋友可以参考一下话不多说，直接上代码：//实例化滚动插件 var myScroll = new IScroll('#wrapper', {scrollX: true, freeScrol

本篇文章给大家分享的内容是浅析手机滑动插件--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

推荐度：

点击下载本文 文档为doc格式

标签：手机插件滚动

热门焦点

浅析手机滑动插件—iscroll.js

浅析手机滑动插件—iscroll.js

浅析手机滑动插件—iscroll.js

最新推荐

猜你喜欢

热门推荐