新聞中心
這篇文章主要介紹基于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; }滾動測試
- Pretty row 1
- Pretty row 2
- Pretty row 3
- Pretty row 4
- Pretty row 5
- Pretty row 6
- Pretty row 7
- Pretty row 8
- Pretty row 9
- Pretty row 10
- Pretty row 11
- Pretty row 12
- Pretty row 13
- Pretty row 14
- Pretty row 15
- Pretty row 16
- Pretty row 17
- Pretty row 18
四、運行效果
以上是“基于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