<!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>#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;}参考地址：
扫一扫
8045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
