1. <ul id="0c1fb"></ul>

      <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
      <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>

      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

      RELATEED CONSULTING
      相關咨詢
      選擇下列產(chǎn)品馬上在線溝通
      服務時間:8:30-17:00
      你可能遇到了下面的問題
      關閉右側工具欄

      新聞中心

      這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
      基于iScroll如何實現(xiàn)內(nèi)容滾動效果

      這篇文章主要介紹基于iScroll如何實現(xiàn)內(nèi)容滾動效果,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

      成都創(chuàng)新互聯(lián),為您提供網(wǎng)站建設成都網(wǎng)站制作、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設計,對服務紙箱等多個行業(yè)擁有豐富的網(wǎng)站建設及推廣經(jīng)驗。成都創(chuàng)新互聯(lián)網(wǎng)站建設公司成立于2013年,提供專業(yè)網(wǎng)站制作報價服務,我們深知市場的競爭激烈,認真對待每位客戶,為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進步,是我們永遠的責任!

      一、iScroll簡介

      iScroll 是一款針對web app使用的滾動控件,它可以模擬原生IOS應用里的滾動列表操作,還可以實現(xiàn)縮放、拉動刷新、精確捕捉元素、自定義滾動條等功能。這里博主使用的版本iScroll4.25,目前最新版本是iScroll5,大家可以去官網(wǎng)下載。
      官網(wǎng)地址:http://iscrolljs.com/

      二、iScroll使用方法

      1.iScroll使用結構

      最優(yōu)化使用iScroll的結構一般如下所示:

      HTML:

      
        
         
            
      •     ...    
         
            
      •     ...    
        
       

      注:1、iScroll一定要與滾動內(nèi)容外面的wrapper進行聯(lián)系才會產(chǎn)生效果。
             2、只有wrapper里的第一個子元素才可以滾動。

      2、實例化iScroll

      iScroll必須在調(diào)用之前實例化,實例化代碼如下(在head標簽中添加如下代碼):

       

      三、滾動測試實例

      HTML+CSS:

      
      
      
      
      
      
      
      
      
      
      #wrapper {
       position:absolute; z-index:1;
       top:45px; bottom:48px; left:0;
       width:100%;
       background:#aaa;
       overflow:auto;
      }
      
      #scroller {
       position:relative;
      /* -webkit-touch-callout:none;*/
       -webkit-tap-highlight-color:rgba(0,0,0,0);
      
       float:left;
       width:100%;
       padding:0;
      }
      
      #scroller ul {
       position:relative;
       list-style:none;
       padding:0;
       margin:0;
       width:100%;
       text-align:left;
      }
      
      #scroller li {
       padding:0 10px;
       height:40px;
       line-height:40px;
       border-bottom:1px solid #ccc;
       border-top:1px solid #fff;
       background-color:#fafafa;
       font-size:14px;
      }
      
      #scroller li > a {
       display:block;
      }
      
      滾動測試
      
      
      
       
        
         
    2. Pretty row 1
    3.    Pretty row 2    
    4. Pretty row 3
    5.    
    6. Pretty row 4
    7.    
    8. Pretty row 5
    9.    
    10. Pretty row 6
    11.    
    12. Pretty row 7
    13.    
    14. Pretty row 8
    15.    
    16. Pretty row 9
    17.    
    18. Pretty row 10
    19.    
    20. Pretty row 11
    21.    
    22. Pretty row 12
    23.    
    24. Pretty row 13
    25.    
    26. Pretty row 14
    27.    
    28. Pretty row 15
    29.    
    30. Pretty row 16
    31.    
    32. Pretty row 17
    33.    
    34. Pretty row 18
    35.     

      四、運行效果

      基于iScroll如何實現(xiàn)內(nèi)容滾動效果

      以上是“基于iScroll如何實現(xiàn)內(nèi)容滾動效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


      文章題目:基于iScroll如何實現(xiàn)內(nèi)容滾動效果
      文章分享:http://www.ef60e0e.cn/article/jgesei.html
      99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区
      1. <ul id="0c1fb"></ul>

        <noscript id="0c1fb"><video id="0c1fb"></video></noscript>
        <noscript id="0c1fb"><listing id="0c1fb"><thead id="0c1fb"></thead></listing></noscript>

        北川| 平南县| 丘北县| 图片| 墨江| 黄骅市| 大新县| 双柏县| 南江县| 麟游县| 白玉县| 孝昌县| 沁源县| 湾仔区| 开封市| 库车县| 中山市| 武鸣县| 封开县| 筠连县| 富裕县| 康平县| 安图县| 饶河县| 乌兰浩特市| 东港市| 洪雅县| 大同县| 临猗县| 东乡族自治县| 永嘉县| 股票| 玉环县| 日照市| 连州市| 宁乡县| 新竹县| 玛多县| 原阳县| 织金县| 佛学|