A brief analysis of mobile phone sliding plug-in

A brief analysis of mobile phone sliding plug-in—iscroll.js

零到壹度

Release： 2018-04-14 14:57:20

Original

1908 people have browsed it

The content of this article is to share with you a brief analysis of the mobile phone sliding plug-in-iscroll.js, which has a certain reference value. Friends in need can refer to it

No words Say more, go directly to the code:

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

Copy after login

I don’t know how the master does it, but this is how I calculate the width –

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

Copy after login

Complete example

<!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(&#39;p&#39;, {scrollX: true, scrollY: false});
    myScroll.scrollToElement(&#39;.active&#39;,true,true);</script></body></html>

Copy after login

Related recommendations:

##gethub official website address

##Comparatively complete Chinese API

Clear usage

The above is the detailed content of A brief analysis of mobile phone sliding plug-in—iscroll.js. For more information, please follow other related articles on the PHP Chinese website!