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. Could not calculate build plan: Plugin org.apache.maven.plugins:maven-war-plugin:2.3

    Maven 导入项目时报错: Could not calculate build plan: Plugin org.apache.maven.plugins:maven-war-plugin:2.3 ...

  2. Linux查找含有某字符串的文本文件

    转自:http://www.cnblogs.com/wangkongming/p/4476933.html 如果你想在当前目录下 查找"hello,world!"字符串,可以这样 ...

  3. 查看ubuntu 各系统的内核版本

    1.查看ubuntu版本号:   cat  /etc/issue 返回结果: Ubuntu 16.04.2 LTS \n \l   2.查看内核版本号:   cat /proc/version 返回结 ...

  4. Flash Builder4注册机

    我的Eclipse下的Flash Builder 4正式版已经过期,之前在网上找到的注册码,都不能用了, 花了很久时间,才找到这个注册机. Flash Builder 4 注册机 Serial Cra ...

  5. Openwrt架设GIT服务

    #下载宝刷LEDE版系统后, 在上面安装git包 opkg update opkg install git #安装好后在将git仓库装到SD(TF)卡上 #用fdisk对SD 卡分区 #fdisk / ...

  6. J2Cache 和普通缓存框架有何不同，它解决了什么问题？

    不少人看到 J2Cache 第一眼时,会认为这就是一个普普通通的缓存框架,和例如 Ehcache.Caffeine .Spring Cache 之类的项目没什么区别,无非是造了一个新的轮子而已.事实上 ...

  7. spring项目gitignore

    target/ ### STS ### .apt_generated .classpath .factorypath .project .settings .springBeans ### Intel ...

  8. linux挂载iso，u盘，分区，squashfs压缩文件

    常见分区加载方法: mount挂载iso文件: #mkdir /mnt/iso1 #mount –o loop linuxsetup.iso /mnt/iso1 在linux 不需要虚拟光驱,就可以直 ...

  9. 20145307第二次JAVA学习实验报告

    20145307<Java程序设计>实验报告二:Java面向对象程序设计 实验要求 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4 ...

  10. 2045331 《Java程序设计》第09周学习总结

    2045331 <Java程序设计>第09周学习总结 教材学习内容总结 第十六章 整合数据库 16.1.1JDBC简介 1.JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接 ...