js自定义浏览器下拉刷新

之前做了一个移动端的项目，使用的是自带的下拉刷新，暴露的方法有限，感觉效果不怎么好。于是看看能不能手做一个；思路就是，拖动 => 回弹；
css部分

			body{
				margin: 0;;
				padding: 0;
			}
			.page{
				position: absolute;
				width: 300px;
				height: 500px;
				background-color: mediumaquamarine;
				border: 2px solid black;
				overflow: hidden;
			}
			.box{
				position: absolute;
				width: 300px;
				height: 500px;
				background-color: #FFDEAD;
				transition: all 0s ease;
			}

heml

		<div class="page" id="page">
			<div class="box" id="box">
			</div>
		</div>

js

			const box = document.getElementById('box');
			const page = document.getElementById('page');
			let X = 0, Y = 0,tempY = 0;
			let lock =  false;
			const width = box.clientWidth, height = box.clientHeight;
			
			box.addEventListener('mousedown', (e) =>{
				Y = e.clientY;
				if(!lock){
				   box.onmousemove = move;
				}

			})
			box.addEventListener('mouseup', (e) =>{
				box.onmousemove = null;
				An(box, 1000, tempY)
			})
			page.addEventListener('mouseleave', (e) =>{
				box.onmousemove = null;
			    An(box, 1000, tempY)
			})
			function move(e){
				let distance = e.clientY - Y;
				if(distance >= 0 && distance <= height / 2){
					box.style.top = distance + 'px';
					tempY = distance;
				} 
			}
			function An(node, time, tempY){
				console.log(time);
				if(lock)return;
				lock = true;
				let times = 0;
				if(tempY > height / 4){
					times = 2000;
					loading(times);
				};
				setTimeout(() => {
					node.style = `top: 0px; transition-duration: ${time / 1000}s;`
					setTimeout(()=>{
						lock = false;
						node.style = `transition-duration: 0s`
					},time)
				}, times);
			}
			
			function loading(t){
				if(t !== 0){
					box.innerText = '数据拉取中。。。。。';
					setTimeout(()=>{box.innerText = '更新完毕!';}, t);
				}
			}

效果


可以封装成一个组件，效果还可以。