先端に引っ張り込み&ドロップリフレッシュ-天に向かう

	
    ...
	

	
    ...

	
		function refreshAndLoad(option){
			if(!option.dom)return false;
			let 
				dom = option.dom.parentNode,
				list = option.dom,
				offset = 50,//     
                cur = 0,//      
                isDown = false,
                vy = 0,//     
                fl = 100,//  ,   ,      ,        
                isInTransition = false;//      
			if(!list)return false;
			const 
				isPC =  (function(){
					var userAgentInfo = navigator.userAgent;
					var Agents = ["Android", "iPhone",
								"SymbianOS", "Windows Phone",
								"iPad", "iPod"];
					var flag = true;
					for (var v = 0; v < Agents.length; v++) {
						if (userAgentInfo.indexOf(Agents[v]) > 0) {
							flag = false;
							break;
						}
					}
					return flag;
				}()),
				start = isPC?'mousedown':'touchstart',
				move = isPC?'mousemove':'touchmove',
				end = isPC?'mouseup':'touchend';
			function setPos(y) {//    y   ,    
				list.style.transform = "translateY(" + y + "px) translateZ(0)";
			}
			function ease(target) {
				isInTransition = true;
				dom._timer = setInterval(function () {//                    2       
					cur -= (cur - target) * 0.2;
					if (Math.abs(cur - target) < 1) {//                  1       
						cur = target;
						clearInterval(dom._timer);
						isInTransition = false;
					}
					setPos(cur);
				}, 20);
			}
			function endHandle(e){
				if (isDown) {
					isDown = false;
					const
						t = this,
						friction = ((vy >> 31) * 2 + 1) * 0.5,
						oh = this.scrollHeight - this.clientHeight;
						
					this._timer = setInterval(function () {
						vy -= friction;
						cur += vy;
						setPos(cur);
						(-cur - oh > offset || cur - offset >= fl / 3 || cur > offset || Math.abs(vy) < 1 )&&clearTimeout(t._timer);
						if (-cur - oh > offset)
							return Math.abs((-cur - oh) - offset) >= fl / 3
								?option.load?option.load(function(){ease(-oh)})
								:function(){ease(-oh)}:ease(-oh)
						return cur - offset >= fl / 3
								?option.refresh?option.refresh(function(){ease(0)}):function(){ease(0)}:cur > offset
								?ease(0):Math.abs(vy) < 1&&(cur > 0 ? ease(0) : -cur > oh && ease(-oh))
					},16)
				}
			}
			function startHandle(e){
			if (isInTransition)return;//      ，     
				clearTimeout(this._timer);//     
				vy = 0;
				const touch = e.touches?e.touches[0]:e;
				this._oy = touch.clientY - cur;
				this._cy = touch.clientY;
				this._oh = this.scrollHeight;
				this._ch = this.clientHeight;
				this._startTime = e.timeStamp;
				isDown = true;
			}
			function moveHandle(e){
				const touch = e.touches?e.touches[0]:e;
				if (isDown) {
					if (e.timeStamp - this._startTime > 40) {
						this._startTime = e.timeStamp;
						cur = touch.clientY - this._oy;
						if (cur > 0) {
							cur *= fl / (fl + cur);
						}else if (cur < this._ch - this._oh) {
							cur += this._oh - this._ch;
							cur = cur * fl / (fl - cur) - this._oh + this._ch;
						}
						setPos(cur);
					}
				}
				vy = touch.clientY - this._cy;
				this._cy = touch.clientY;
			}
			
			dom.addEventListener(start,startHandle,false)
			
			dom.addEventListener(move,moveHandle,false)
			
			dom.addEventListener(end,endHandle,false)
		
			dom.addEventListener("mouseleave", endHandle, false);
		
		}
	const ul = document.querySelector("ul");
		let index = 1
	for(let i = 0; i< 20;i++){
		let li = document.createElement('li');
		li.innerHTML = i+1;
		ul.appendChild(li)
	}
	refreshAndLoad({
		dom:ul,
		load(done){	//    
			setTimeout(function(){
				index++
				for(let i = 0; i < 20;i++){
					let li = document.createElement('li');
					li.innerHTML = (index * 20 ) + i+1;
					ul.appendChild(li)
				}
				index++
				done()
			},3 * 1000)
		},
		refresh(done){	//    
			setTimeout(function(){
				index = 0
				ul.innerHTML = null
				for(let i = 0; i < 20;i++){
					let li = document.createElement('li');
					li.innerHTML = i+1;
					ul.appendChild(li)
				}
				done()
			},3 * 1000)
		}
	})