1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  6. <meta name="format-detection" content="telephone=no, email=no, adress=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-touch-fullscreen" content="yes">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta name="description" content="">
  11. <meta name="keywords" content="">
  12. <link type="text/css" rel="stylesheet" href="./css/reset.css" />
  13. <link type="text/css" rel="stylesheet" href="./css/index.css" />
  14. <title></title>
  15. </head>
  16. <body>
  17. <div id="wrapper">
  18. <div id="scroller">
  19. <ul>
  20. <li>1</li>
  21. <li>2</li>
  22. <li>3</li>
  23. <li>4</li>
  24. <li id="a">5</li>
  25. <li>6</li>
  26. <li>7</li>
  27. <li>8</li>
  28. <li>9</li>
  29. <li>10</li>
  30. <li>11</li>
  31. <li>12</li>
  32. <li>13</li>
  33. <li>14</li>
  34. <li>15</li>
  35. <li>16</li>
  36. <li>17</li>
  37. <li>18</li>
  38. <li>19</li>
  39. <li>20</li>
  40. </ul>
  41. </div>
  42. </div>
  43. <div class="footer">
  44. <p>上面的容器是可以滚动的区域</p>
  45. </div>
  46. <script src="js/jquery-2.0.3.min.js"></script>
  47. <script src="js/iScroll.js"></script>
  48. <script>
  49. //IScroll会获取容器内的第一个子元素进行滚动，其它子元素会被忽略，且该子元素（scroller）必须有固定的高度（或宽度），在这里，即ID为scroller的元素可以滚动
  50. var myScroll = new IScroll('#wrapper',{
  51. mouseWheel : true,      //鼠标滚轮支持
  52. scrollbars : true,      //滚动条支持
  53. scrollY : true,         //滚动方向（垂直）
  54. scrollX : true,         //滚动方向（水平）
  55. bounce : true,          //边界时的反弹动画，默认true
  56. click : true,           //IScroll默认禁止了点击事件，如需绑定点击事件，请将该参数值设为true
  57. freeScroll : true,      //当需要执行两个纬度上的滚动时（即横向、纵向都开启），设置该参数，默认为false
  58. startX : 0,             //滚动条开始的位置（横坐标）
  59. startY : 0,             //滚动条开始的位置（纵坐标）
  60. tap : true,             //设置为true时，允许为用户点击或者触摸（并没有滚动时）触发一个自定义事件，或者设置值为一个自定义事件名称的字符串
  61. snap : 'li'             //对齐（根据元素li对齐切割整个容器）
  62. });
  63. console.log(myScroll.options);      //通过options对象访问myScroll实例的配置信息
  64. //给li绑定点击事件
  65. $('#scroller ul li').on('click',function(){
  66. console.log($(this).html());
  67. })
  68. //绑定tap自定义事件
  69. $('#wrapper').on('tap',function(){
  70. console.log('开始滚动了');
  71. })
  72. myScroll.scrollTo(0,-250);      //控制滚动条到任意的位置
  73. myScroll.scrollBy(0,-10);       //从当前位置向下滚动10个像素
  74. //滚动到该元素的位置，第二个参数为时间，第三个第四个参数为偏移量（如果设置这两个参数为true，该元素将会显示在容器的中间）
  75. myScroll.scrollToElement('#a',1000,0,0);
  76. //关于snap对齐后操作的方法
  77. myScroll.goToPage(0,5,1000);    //滚动到对齐后的第五页（即第五个li的位置）
  78. myScroll.next();    //当前位置的下一页
  79. myScroll.prev();    //当前位置的上一页
  80. //IScroll需要知道容器确切的尺寸，如果容器大小发生了变化，需要使用刷新方法
  81. myScroll.refresh();
  82. //自定义事件
  83. myScroll.on('scrollEnd',function(){
  84. console.log('滚动结束');
  85. console.log(this.x + '&' + this.y);     //当前位置
  86. console.log(this.directionX + '&' + this.directionY);   //最后的方向
  87. console.log(this.currentPage);      //当前对齐捕获点
  88. })
  89. //销毁
  90. //myScroll.destroy();
  91. //当滚动到底部时的myScroll.x/y
  92. console.log(myScroll.maxScrollX + '&' + myScroll.maxScrollY);
  93. </script>
  94. </body>
  95. </html>
 

index.css

  1. #wrapper{width:100%; height:500px; overflow:hidden;}
  2. #scroller{width:500px; height:60rem;}
  3. ul li{width:500px; height:3rem; line-height:3rem; border-bottom:1px solid #CCC; text-align:center; box-sizing:border-box;}
  4. .footer p{line-height:3rem; text-align:center;}

使用IScroll5实现上拉加载、下拉刷新

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  6. <meta name="format-detection" content="telephone=no, email=no, adress=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-touch-fullscreen" content="yes">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta name="description" content="">
  11. <meta name="keywords" content="">
  12. <link type="text/css" rel="stylesheet" href="./css/reset.css" />
  13. <link type="text/css" rel="stylesheet" href="./css/index.css" />
  14. <title></title>
  15. </head>
  16. <body>
  17. <div id="wrapper">
  18. <div id="scroller">
  19. <ul>
  20. <li>1</li>
  21. <li>2</li>
  22. <li>3</li>
  23. <li>4</li>
  24. <li>5</li>
  25. <li>6</li>
  26. <li>7</li>
  27. <li>8</li>
  28. <li>9</li>
  29. <li>10</li>
  30. <li>11</li>
  31. <li>12</li>
  32. <li>13</li>
  33. <li>14</li>
  34. <li>15</li>
  35. <li>16</li>
  36. <li>17</li>
  37. <li>18</li>
  38. <li>19</li>
  39. <li>20</li>
  40. </ul>
  41. </div>
  42. <p class="p-1">下拉刷新</p>
  43. <p class="p-2">上拉加载</p>
  44. </div>
  45. <div class="footer">
  46. <p>上面的容器是可以滚动的区域</p>
  47. </div>
  48. <script src="js/jquery-2.0.3.min.js"></script>
  49. <script src="js/iScroll.js"></script>
  50. <script>
  51. //实现上拉加载、下拉刷新
  52. var myScroll = new IScroll('#wrapper',{
  53. scrollY : true,
  54. scrollX : false
  55. })
  56. myScroll.on('scrollEnd',function(){
  57. //因为值为负数，所以使用小于等于
  58. if(this.y <= this.maxScrollY){
  59. console.log('滑动到最底部了');
  60. var li = '<li>新的内容</li><li>新的内容</li><li>新的内容</li><li>新的内容</li><li>新的内容</li>';
  61. $('#scroller ul').append(li);
  62. $('#scroller').css({height : $('#scroller').height() + (42 * 5) + 'px'});
  63. this.refresh();
  64. }
  65. })
  66. </script>
  67. </body>
  68. </html>

index.css

  1. #wrapper{width:100%; height:500px; overflow:hidden; position:relative;}
  2. #scroller{width:100%; height:840px; background-color:#FFF; position:absolute; z-index:1;}
  3. ul li{width:100%; height:42px; line-height:42px; border-bottom:1px solid #CCC; text-align:center; box-sizing:border-box;}
  4. #wrapper p{position:absolute; text-align:center; height:3rem; line-height:3rem; color:red; width:100%;}
  5. #wrapper p.p-1{top:0;}
  6. #wrapper p.p-2{bottom:0;}
  7. .footer p{line-height:3rem; text-align:center;}

参考地址：

http://www.mamicode.com/info-detail-331827.html

http://www.tuicool.com/articles/vMn2u2

使用IScroll5实现滚动的更多相关文章

  1. react + iscroll5 实现完美 下拉刷新，上拉加载

    经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能. 一开始直接采用了react-iscroll插件,它是基于iscroll插件开发的组件.但是开发过程中,发现 ...

  2. react + iscroll5

    react + iscroll5 经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能. 一开始直接采用了react-iscroll插件,它是基于iscroll插 ...

  3. jquery——移动端滚动条插件iScroll.js

    官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...

  4. 写入标题使用依赖注入Title的setTitle方法

    1. 声明 Generator的声明方式类似一般的函数声明,只是多了个*号,并且一般可以在函数内看到yield关键字 function* showWords() { yield 'one'; yiel ...

  5. iscroll5实现一个下拉刷新上拉加载的效果

    直接上代码!!! <!DOCTYPE html><html><head lang="en"> <meta charset="UT ...

  6. iScroll-5 API 中文版

    http://wiki.jikexueyuan.com/project/iscroll-5/ http://www.mamicode.com/info-detail-331827.html IScro ...

  7. iScroll-5拉动刷新功能实现与iScroll-4上拉刷新的一点改进

    近来在学习移动设备的应用开发,接触了jQuery mobile,在网上查阅相关资料时发现一个叫”iScroll“的小插件.其实这个iScroll插件跟jQuery mobile没有多大关系,并不是基于 ...

  8. H5手机开发锁定表头和首列(惯性滚动)解决方案

    前端时间移动端在做表格的时候需要这个功能,由于还有实现类似原生的惯性滚动功能,于是使用了iscroll插件. iscroll插件下载地址:iscroll5 该功能demo github地址: http ...

  9. IScroll5不能滑到最底端的解决办法

    IScroll总体上用起来比较简单,但是如果用不好的可能会产生底部一点滚动不上去的问题. 环境:weui+iscroll5 整体布局及id如下 searchbarwrapper   divscroll ...

随机推荐

  1. oracle 将当前系统时间戳插入timestamp字段

    oracle 将当前系统时间戳插入timestamp字段 --insert records 精确到秒:insert into userlogin_his(usrname,logintime) valu ...

  2. Linux中LVM2原理

    一.LVM原理 [MD]:Multi Device 多设备 Mdadm是一个用户空间工具,是RAID的管理工具,与真正的RAID工作没有太大关系.真正的RAID集成在linux内核中 [DM]Devi ...

  3. rowspan && colspan

    > 跨行 <html> <body> <table width="> <tr> <th>col1</th> &l ...

  4. 【Beginning Python】抽象（未完）

    [懒惰即是美德] 抽象意味着良好的可读性:说明你在努力做什么,而不是给出你正在如何做的细节. [抽象和结构] 程序应该是非常抽象的,就像“下载网页.计算频率.打印每个单词的频率”一样易懂.翻译成程序就 ...

  5. TCP/UDP 端口

    端口说明 小于1024的端口通常运行一些网络服务 大于1024的端口用来与远程机器建立连接 TCP端口 = 回显 = 丢弃 = 在线用户 = 时间服务 = 网络状态 = 每日引用 = 消息发送 = 字 ...

  6. Thinkphp5.0实战开发一------命名空间详解

    序言 ThinkPHP是一个快速.兼容而且简单的轻量级国产PHP开发框架,使用ThinkPHP框架可以极大简化我们的开发过程,节省时间.这个专题我将记录自己学习使用ThinkPHP5.0的进行实战开发 ...

  7. obtainBuffer timed out (is the CPU pegged?)

    https://stackoverflow.com/questions/5293025/audiotrack-lag-obtainbuffer-timed-out [典] 03-13 14:55:57 ...

  8. 关于JavaScript对象，你所不知道的事（二）- 再说属性

    说完了对象那些不常用的冷知识,是时候来看看JavaScript中对象属性有哪些有意思的东西了. 不出你所料,对象属性自然也有其相应的特征属性,但是这个话题有点复杂,让我们先从简单的说起,对象属性的分类 ...

  9. 剑指Offer——最长不包含重复字符的子字符串

    Solution 动态规划. f(i)表示包含第i个字符的最长子串. 如果第i个字符没在之前出现过,那么f(i) = f(i - 1) + 1 如果第i个字符在之前出现过,这个时候应该分两种情况,假设 ...

  10. 转：web.xml 中的listener、 filter、servlet 加载顺序及其详解

    在项目中总会遇到一些关于加载的优先级问题,刚刚就遇到了一个问题,由于项目中使用了quartz任务调度,quartz在web.xml中是使用listener进行监听的,使得在tomcat启动的时候能马上 ...