IScroll

IScroll 是一款滚动特效插件, 在移动端使用很频繁。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Rem</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
	<style type="text/css">
		* {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			padding: 0;
			margin: 0;
			border: 0;
		}
		html {
			-ms-touch-action: none;
		}
		body {
			font-size: 12px;
			font-family: ubuntu, helvetica, arial;
			overflow: hidden; 
		}
		#header {
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			width: 100%;
			height: 45px;
			line-height: 45px;
			background: #CD235C;
			padding: 0;
			color: #eee;
			font-size: 20px;
			text-align: center;
			font-weight: bold;
		}
		#footer {
			position: absolute;
			z-index: 2;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 48px;
			line-height: 48px;
			font-size: 20px;
			background: #444;
			padding: 0;
			border-top: 1px solid #444;
			text-align: center;
			font-weight: bold;
			color: #fff;
		}
		.wrapper {
			position: absolute;
			z-index: 1;
			top: 45px;
			bottom: 48px;
			left: 0;
			width: 100%;
			background: #ccc;
			overflow: hidden;
			text-align: center;
			line-height: 24px;
		}
	</style>
</head>
<body>
	<div id="header">Header</div>
	<script type="text/javascript">
		var number = 1;
		function createdata(){
			var html = "";
			for(var i=number,size = number+100; i < size; i++){
        		html +=("<li>"+ i +"</li>");
        	}
        	number+=100;
        	return html;
		}
	</script>
	<div class="wrapper">
	    <ul>
	        <script type="text/javascript">
	        	//生成 100  li
	        	document.write(createdata());
	        </script>
	    </ul>
	</div>
	<div id="footer">Footer</div>
	<script src="js/iscroll.js"></script>
	<script>
		document.addEventListener('touchmove', function (e) { 
			e.preventDefault(); 
		});
		var myScroll;
		//实例化一个元素, 使其元素区域可以上下滚动
		myScroll = new IScroll('.wrapper', { 
			scrollX: false, //不允许 左右滑动 
			scrollbars: true,   //开启滚动条样式
			mouseWheel : true   //开启鼠标滚轮
		});
	</script>
</body>
</html>

See Demo


下拉刷新

下来刷新是使用 iscroll 非常实用的一个功能

scrollEnd 触摸滑动完毕

var myScroll = new IScroll('.wrapper', {});
//监听滑动完毕
myScroll.on('scrollEnd', function(){
	
});

maxScrollY

myScroll.maxScrollY  可滑动的最大高度

distY

myScroll.distY       本次滑动的区域高度

Y

myScroll.Y           目前的滚动条高度

refresh

myScroll.refresh()   从新加载

结合上面的属性就能实现一个下拉刷新功能

myScroll.on('scrollEnd', function(){
	var maxScrollY = Math.abs(myScroll.maxScrollY);

	var y = Math.abs(myScroll.y);
	if(y == 0 && myScroll.distY > 50){
		console.log("上拉刷新");
	}
	if( y + 100 > maxScrollY){
		console.log('下拉刷新');
		//TODO 处理 dom 操作
		//刷新元素组件,从新加载
		myScroll.refresh();
		//从新定位到刷新前的位置
		myScroll.scrollTo(0,y * -1,1000);
	}
});

See Demo