基于iScroll实现内容滚动效果

2019-11-19 14:07:25

字体：大中小

来源：转载

供稿：网友

一、iScroll简介

iScroll 是一款针对web app使用的滚动控件，它可以模拟原生IOS应用里的滚动列表操作，还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。这里博主使用的版本iScroll4.25，目前最新版本是iScroll5，大家可以去官网下载。
官网地址：http://iscrolljs.com/

二、iScroll使用方法

1.iScroll使用结构

最优化使用iScroll的结构一般如下所示：

HTML:

<div id="wrapper">  <div id="scroller">   <ul>    <li></li>    ...   </ul>   <ul>    <li></li>    ...   </ul>  </div> </div>

注：1、iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。
2、只有wrapper里的第一个子元素才可以滚动。

2、实例化iScroll

iScroll必须在调用之前实例化，实例化代码如下（在head标签中添加如下代码）：

<script src="iscroll.js"></script> <script>  var myscroll;//myscroll是全局变量，可以任意地方调用  function loaded(){   myscroll = new iScroll("wrapper");   }  window.addEventListener("DOMContentLoaded",loaded,false); </script>

三、滚动测试实例

HTML+CSS:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><script src="iscroll-4.2.5fix.js"></script><!--引入js包--><!--实例化iScroll--><script type="text/javascript"> var myscroll; function loaded(){ myscroll = new iScroll("wrapper"); } window.addEventListener("DOMContentLoaded",loaded,false);</script><!--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;}</style><title>滚动测试</title></head><body><div id="wrapper"> <div id="scroller">  <ul id="thelist">   <li>Pretty row 1</li>   <li id="aaa">Pretty row 2</li>   <li>Pretty row 3</li>   <li>Pretty row 4</li>   <li>Pretty row 5</li>   <li>Pretty row 6</li>   <li>Pretty row 7</li>   <li>Pretty row 8</li>   <li>Pretty row 9</li>   <li>Pretty row 10</li>   <li>Pretty row 11</li>   <li>Pretty row 12</li>   <li>Pretty row 13</li>   <li>Pretty row 14</li>   <li>Pretty row 15</li>   <li>Pretty row 16</li>   <li>Pretty row 17</li>   <li>Pretty row 18</li>  </ul> </div></div></body></html>

四、运行效果