<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no, adress=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="description" content=""> <meta name="keywords" content=""> <link type="text/css" rel="stylesheet" href="./css/reset.css" /> <link type="text/css" rel="stylesheet" href="./css/index.css" /> <title></title> </head> <body> <div id="wrapper"> <div id="scroller"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li id="a">5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> </ul> </div> </div> <div class="footer"> <p>上面的容器是可以滚动的区域</p> </div> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/iScroll.js"></script> <script> //IScroll会获取容器内的第一个子元素进行滚动,其它子元素会被忽略,且该子元素(scroller)必须有固定的高度(或宽度),在这里,即ID为scroller的元素可以滚动 var myScroll = new IScroll('#wrapper',{ mouseWheel : true, //鼠标滚轮支持 scrollbars : true, //滚动条支持 scrollY : true, //滚动方向(垂直) scrollX : true, //滚动方向(水平) bounce : true, //边界时的反弹动画,默认true click : true, //IScroll默认禁止了点击事件,如需绑定点击事件,请将该参数值设为true freeScroll : true, //当需要执行两个纬度上的滚动时(即横向、纵向都开启),设置该参数,默认为false startX : 0, //滚动条开始的位置(横坐标) startY : 0, //滚动条开始的位置(纵坐标) tap : true, //设置为true时,允许为用户点击或者触摸(并没有滚动时)触发一个自定义事件,或者设置值为一个自定义事件名称的字符串 snap : 'li' //对齐(根据元素li对齐切割整个容器) }); console.log(myScroll.options); //通过options对象访问myScroll实例的配置信息 //给li绑定点击事件 $('#scroller ul li').on('click',function(){ console.log($(this).html()); }) //绑定tap自定义事件 $('#wrapper').on('tap',function(){ console.log('开始滚动了'); }) myScroll.scrollTo(0,-250); //控制滚动条到任意的位置 myScroll.scrollBy(0,-10); //从当前位置向下滚动10个像素 //滚动到该元素的位置,第二个参数为时间,第三个第四个参数为偏移量(如果设置这两个参数为true,该元素将会显示在容器的中间) myScroll.scrollToElement('#a',1000,0,0); //关于snap对齐后操作的方法 myScroll.goToPage(0,5,1000); //滚动到对齐后的第五页(即第五个li的位置) myScroll.next(); //当前位置的下一页 myScroll.prev(); //当前位置的上一页 //IScroll需要知道容器确切的尺寸,如果容器大小发生了变化,需要使用刷新方法 myScroll.refresh(); //自定义事件 myScroll.on('scrollEnd',function(){ console.log('滚动结束'); console.log(this.x + '&' + this.y); //当前位置 console.log(this.directionX + '&' + this.directionY); //最后的方向 console.log(this.currentPage); //当前对齐捕获点 }) //销毁 //myScroll.destroy(); //当滚动到底部时的myScroll.x/y console.log(myScroll.maxScrollX + '&' + myScroll.maxScrollY); </script> </body> </html>
index.css
#wrapper{width:100%; height:500px; overflow:hidden;} #scroller{width:500px; height:60rem;} ul li{width:500px; height:3rem; line-height:3rem; border-bottom:1px solid #CCC; text-align:center; box-sizing:border-box;} .footer p{line-height:3rem; text-align:center;}
使用IScroll5实现上拉加载、下拉刷新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no, adress=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="description" content=""> <meta name="keywords" content=""> <link type="text/css" rel="stylesheet" href="./css/reset.css" /> <link type="text/css" rel="stylesheet" href="./css/index.css" /> <title></title> </head> <body> <div id="wrapper"> <div id="scroller"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> </ul> </div> <p class="p-1">下拉刷新</p> <p class="p-2">上拉加载</p> </div> <div class="footer"> <p>上面的容器是可以滚动的区域</p> </div> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/iScroll.js"></script> <script> //实现上拉加载、下拉刷新 var myScroll = new IScroll('#wrapper',{ scrollY : true, scrollX : false }) myScroll.on('scrollEnd',function(){ //因为值为负数,所以使用小于等于 if(this.y <= this.maxScrollY){ console.log('滑动到最底部了'); var li = '<li>新的内容</li><li>新的内容</li><li>新的内容</li><li>新的内容</li><li>新的内容</li>'; $('#scroller ul').append(li); $('#scroller').css({height : $('#scroller').height() + (42 * 5) + 'px'}); this.refresh(); } }) </script> </body> </html>index.css
#wrapper{width:100%; height:500px; overflow:hidden; position:relative;} #scroller{width:100%; height:840px; background-color:#FFF; position:absolute; z-index:1;} ul li{width:100%; height:42px; line-height:42px; border-bottom:1px solid #CCC; text-align:center; box-sizing:border-box;} #wrapper p{position:absolute; text-align:center; height:3rem; line-height:3rem; color:red; width:100%;} #wrapper p.p-1{top:0;} #wrapper p.p-2{bottom:0;} .footer p{line-height:3rem; text-align:center;}
参考地址:
http://www.mamicode.com/info-detail-331827.html
http://www.tuicool.com/articles/vMn2u2