移动端实现滑屏和添加自定义滚动条（也可以不加）的封装函数

把昨天的实例用到的函数封装了一下，方便以后用在其他的地方（功能会不断完善，持续更新中……）

更新于：2018/6/6  更新的内容为：添加了几个可选函数（start、move、end、over），其中start是手指按下时，执行的函数，move是手指移动时，执行的函数，end是手指抬起时执行的函数，over是滚动结束后执行的函数

使用方法如下小实例所示：

window.onload = function(){
	createList();
	var wrap = document.querySelector('#wrap');
	
mScroll({
                el:box,
                start:function(e){
                    console.log("手指按下要执行的函数");
                },
                move:function(e){
                    console.log("发生滚动的时候，执行的函数")
                },
                end:function(e){
                    console.log("手指抬起要执行的函数");
                },
                over:function(){
                    console.log("滚动结束");
                }
            });
};

mScroll(init);

参数说明：init：对象，里面可以有两个属性。

el:是必须的，就是想要实现滑屏时，移动的主体部分

offBar：是是否添加滚动条，如果不添加的话就加这个属性，属性值为true，如果不写这个属性或者这个属性的值为false时，就表示加滚动条

start、move、end、over，作用上面已经说过了，记得都是函数类型

看下面的封装代码：

function mScroll(init){
	if(!init.el){
		return;
	}
	var wrap = init.el;
	var inner = init.el.children[0];
	var scrollBar = document.createElement("div");	
	var startPoint = 0;
	var startEl = 0;
	var lastY = 0;
	var lastDis = 0;
	var lastTime = 0;
	var lastTimeDis = 0;
	var back = document.documentElement.clientWidth/8;
	var maxTranslate = wrap.clientHeight - inner.offsetHeight;
	scrollBar.id = "scrollBar";
	if(!init.offBar){
		var scale = wrap.clientHeight/inner.offsetHeight;
		inner.style.minHeight = "100%";
		scrollBar.style.cssText = "width:4px;background:rgba(0,0,0,.5);position:absolute;right:0;top:0;border-radius:2px;opacity:0;transition:.3s opacity;";
		wrap.appendChild(scrollBar);
	}
	css(inner,"translateZ",0.01);
	inner.addEventListener('touchstart', function(e) {
		maxTranslate = wrap.clientHeight - inner.offsetHeight;
		if(!init.offBar){
			if(maxTranslate >= 0) {
				scrollBar.style.display = "none";
			} else {
				scrollBar.style.display = "block";
			}
			scale = wrap.clientHeight/inner.offsetHeight;
			scrollBar.style.height = wrap.clientHeight * scale + "px";
		}
		clearInterval(inner.timer);
		startPoint = e.changedTouches[0].pageY;
		startEl = css(inner,"translateY");
		lastY = startEl;
		lastTime = new Date().getTime();
		lastTimeDis = lastDis = 0;
		(init.offBar)||(scrollBar.style.opacity = 1);
		init.start&&init.start.call(box,e);
	});
	inner.addEventListener('touchmove', function(e) {
		var nowTime = new Date().getTime();
		var nowPoint = e.changedTouches[0].pageY;
		var dis = nowPoint - startPoint;
		var translateY = startEl + dis;
		if(translateY > back){
			translateY = back
		} else if(translateY < maxTranslate -back){
			translateY = maxTranslate - back;
		}
		css(inner,"translateY",translateY);
		(init.offBar)||css(scrollBar,"translateY",-translateY*scale);
		lastDis = translateY - lastY;
		lastY = translateY;
		lastTimeDis = nowTime - lastTime;
		lastTime = nowTime;
		init.move&&init.move.call(box,e);
	});
	inner.addEventListener('touchend', function(e) {
		var type = "easeOut";
		var speed = Math.round(lastDis / lastTimeDis*10);
		speed = lastTimeDis <= 0?0 :speed;
		var target = Math.round(speed*30 + css(inner,"translateY"));
		if(target > 0){
			target = 0;
			type = "backOut";
		} else if(target < maxTranslate){
			target = maxTranslate;
			type = "backOut";
		}
		MTween({
			el:inner,
			target: {translateY:target},
			time: Math.round(Math.abs(target - css(inner,"translateY"))*1.8),
			type: type,
			callBack: function(){
				(init.offBar) || (scrollBar.style.opacity = 0);
				init.over&&init.over.call(box,e);
			},
			callIn: function(){
				var translateY = css(inner,"translateY");
				init.offBar||css(scrollBar,"translateY",-translateY*scale);
				init.move&&init.move.call(box,e);
			}
		});
		init.end&&init.end.call(box,e);
	});
}