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. 2017浙江省赛 H - Binary Tree Restoring ZOJ - 3965

    地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3965 题目: iven two depth-first-search ...

  2. java红黑树

    从这里学了一些知识点https://blog.csdn.net/sun_tttt/article/details/65445754,感谢作者

  3. SpringBoot Web项目中中如何使用Junit

    Junit这种老技术,现在又拿出来说,不为别的,某种程度上来说,更是为了要说明它在项目中的重要性. 凭本人的感觉和经验来说,在项目中完全按标准都写Junit用例覆盖大部分业务代码的,应该不会超过一半. ...

  4. kivy sdl2 - ImportError: DLL load failed: 找不到指定的模块

    from kivy.app import App from kivy.uix.button import Button class TestApp(App): def build(self): ret ...

  5. 详解Java中的clone方法 -- 原型模式

    转自: http://blog.csdn.net/zhangjg_blog/article/details/18369201 Java中对象的创建   clone顾名思义就是复制, 在Java语言中, ...

  6. saltstack之haproxy的安装配置

    使用saltstack编译安装haproxy: 由于编译安装haproxy,所以安装之前需要建立编译环境,将编译环境需要安装的包单独放置在一个目录中,当编译haproxy或其他时,直接include这 ...

  7. 20145310 《Java程序设计》第5周学习总结

    20145310 <Java程序设计>第5周学习总结 教材学习内容总结 本周主要进行第八章和第九章的学习. java中所有的错误都会打包为对象,可以try catch代表错误的对象后做一些 ...

  8. 20145312 《Java程序设计》第八周学习总结

    20145312 <Java程序设计>第八周学习总结 学习笔记 Chapter 15时间与日期 15.1 日志 15.1.1 日志API简介 java.util.logging包提供了日志 ...

  9. PayPal2019春招实习生笔试题的某一题

    题目简单描述:给你n个点的坐标(x, y),均为浮点数. 如果任意两个点之间的欧几里得距离小于给定的一个浮点值,则认为这两个点之间有关联,并且关联具有传递性,总之就是尽可能扩大一个集合. 输入: d ...

  10. BZOJ4765: 普通计算姬

    BZOJ4765: 普通计算姬 题目描述 传送门 题目分析 求的和非常奇怪,不具有连续性,所有上树的数据结构全死了. 考虑分块,思考对于一段连续的询问区间可以直接询问整块,零散块可以在树上dfs序暴力 ...