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. es6函数模块-------初步学习

    初步学习: 函数参数允许尾逗号 function clownsEverywhere( param1, param2, //param2后面有逗号 ) { } 函数参数可以赋初值 利用解构赋值默认值结合 ...

  2. codeforces 70 D. Professor's task 动态凸包

    地址:http://codeforces.com/problemset/problem/70/D 题目: D. Professor's task time limit per test 1 secon ...

  3. Python之路——堡垒机原理及其简单实现

    1 堡垒机基本概述 其从功能上讲,它综合了核心系统运维和安全审计管控两大主干功能,从技术实现上讲,通过切断终端计算机对网络和服务器资源的直接访问,而采用协议代理的方式,接管了终端计算机对网络和服务器的 ...

  4. NIO 03

    1. 客户端要主动去连接:channel.connect(new InetSocketAddress("localhost",8888)); //用channel.finishCo ...

  5. cx_Oracle连接数据库总结

    python中连接oracle数据库使用第三方库文件cx_Oracle时遇到了各种问题,网上查找资料调试了几天才弄好,下面是不断调试后总结的一些经验.1.oracle客户端(Oracle Instan ...

  6. 解决“检测到有潜在危险的Request.Form值”

    先看如下 web.config 的代码: <system.web>     <compilation debug="true" targetFramework=& ...

  7. 20145302张薇《Java程序设计》第六周学习总结

    20145302 <Java程序设计>第六周学习总结 教材学习内容总结 第十章 串流设计的概念 无论来源和目的地实体形式是什么,只要取得InputStream和OutputStream实例 ...

  8. 开发人员不可不看的 OBD通讯协议知识

    OBD-II Network Standards» J1850 VPW– Adopted by GM; also known as Class 2.– Adopted by Chrysler (kno ...

  9. markdown工作随笔总结

    1. 锚点 (使用方法和链接很像) ## 目录 1. [命名](#命名) ....... **[返回顶部](#目录)** ## 命名 ###命名原则 可以从返回顶部回到目录,也可以点击目录的命名跳到命 ...

  10. Jquery7 表单选择器

    学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以使用之前的常规选择器或过滤器,也可以使用 jQuery 为表 ...