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. dev-server.js详解

    转载自:https://www.cnblogs.com/ye-hcj/p/7091706.html dev-server.js详解 require('./check-versions')() var ...

  2. MySQL中锁详解(行锁、表锁、页锁、悲观锁、乐观锁等)

    悲观锁: 顾名思义,很悲观,就是每次拿数据的时候都认为别的线程会修改数据,所以在每次拿的时候都会给数据上锁.上锁之后,当别的线程想要拿数据时,就会阻塞,直到给数据上锁的线程将事务提交或者回滚.传统的关 ...

  3. python os模块一些常用操作

    os.getcwd() ## 获取当前路径 os.chdir("dirpath") ## 改变目录 os.makedirs("dirname") ## 递归创建 ...

  4. iOS开发之JSONKit

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  5. selenium+python—实现自动化测试基本思路

    测试是一个贯穿于整个开发过程的连续过程,测试最基本的原理就是比较预期结果是否与实际执行结果相同,如果相同则测试成功,否则测试失败. 为了让单元测试代码能够被测试和维护人员更容易地理解,最好的解决办法是 ...

  6. C++MFC之picture control控件铺满图片

    UpdateData(true); //更新路径公共变量     CString m_path = m_edit1.GetString();      if(m_path=="") ...

  7. C#基础--多线程

    一.微软早期操作系统中的问题 在早期的操作系统中,应用程序都是在同一个地址空间中运行的,每个程序的数据其它程序都是可见的,并且因为早期CPU是单内核 的所以所有的执行都是线性的.这就引出两个问题: 第 ...

  8. 如何交叉编译Python到ARM-Linux平台（转）

    源: 如何交叉编译Python到ARM-Linux平台

  9. Calling Convention的总结

    因为经常需要和不同的Calling Convention打交道,前段时间整理了一下它们之间的区别,如下: 清理堆栈 参数压栈顺序 命名规则 (MSVC++) 备注 Cdecl 调用者 (Caller) ...

  10. Redis-与python交互

    安装包 到中文官网查找客户端代码 联网安装 sudo pip install redis 使用源码安装 unzip redis-py-master.zip cd redis-py-master sud ...