移动端 css3 的应用。

做一个移动端小项目接到了两栏布局分别滚动的需求，原生的页面滚动是无法实现的。这个时候本想求助于插件，但是多方考察发现插件体积相对较大而需求也比较简单，故用 iscroll 插件的思路和 jquery 实现了更简单的页面滚动。

功能

1.模拟原生滚动，并有上拉和下拉回弹的效果。 2.两栏分别滚动。 3.暂时无法实现根据加速度来控制滚动。

总体思路

1.通过原生的 touchstart/touchmove/touchend 事件控制手指移动事件。 2.通过以上事件获取始末位置差值进行 translate 变换,并设置过渡以模拟滚动

代码

var scrollUpdown = function($outer,$innerUl){
	// translate模拟滚动
	var scroll = function(block,diff,t){
		block.css('transform','translateY(' + diff + 'px)');
		block.css('transition-duration',t + 'ms');
	};
	// 起始位置相对页面Y轴位置$startY 移动后$moveY 结束时$endY
	var $startY = $moveY = $endY = 0;
	// 外层元素高度和内层ul高度差
	var $heightDiff = $outer.height() - $innerUl.height();
	// 获取每一个li包括padding和border的高度
	var $liHeight = $innerUl.find('li:first-child').outerHeight();
	$innerUl.on('touchstart',function(e){
		// 第一个手指的相对页面Y轴位置
		$startY = e.originalEvent.touches[0].pageY;
	}).on('touchmove',function(e){
		// 移动中第一个手指相对页面Y轴位置
		$moveY = e.originalEvent.touches[0].pageY;
		// 移动中和起始位置的差值
		$diff = $moveY - $startY;
		// $endY+$diff即当前结束位置加上新的位置差值进行移动
		scroll($(this),$endY + $diff,0);
	}).on('touchend',function(e){
		// 前一个末尾值和新的移动位置差相加
		$endY += $diff;
		// 重置移动位置差
		$diff = 0;
		// 如果$endY>0即从最上方向下滑动，则将位置返回最上方
		// 如果$endY<$heightDiff即滑动位置已到最后一屏，则将位置返回最下方
		// 如果$heightDiff<$endY<0即滑动位置在列表中间，按照每块的间距来移动实现左右对齐
		if($endY > 0){
			$endY = 0;
		}
		else if($endY < $heightDiff){
			$endY = $heightDiff;
		}
		else{
			$endY = Math.round($endY/$liHeight)*$liHeight;
		}
		scroll($(this),$endY,600);
	});
};

示例 html 结构： 注意 ul 的高度要设置 min-height 为 100%

<div class="brands">
	<ul class="brands-list">
		<li>111</li>
		<li>111</li>
		<li>111</li>
		<li>111</li>
		<li>111</li>
	</ul>
</div>

调用方式：

scrollUpdown($('.brands'),$('.brands-list'));