一 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>
注: 1iScroll 一定要与滚动内容外面的 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>
四运行效果
博主刚开始学习, 局部内容滚动这只是 iScroll 最基本的功能, 接下来博主会尝试拉动刷新等功能
来源: http://www.jb51.net/article/136850.htm