<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;margin: 0;
}
#div1{
background: black;
height: 300px;
transition: all 0.1s ease;
}
#div2{
background: #ffffff;
height: 100%;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
<script>
var div1 = document.getElementById('div1');
var startX,startY,directionX,directionY,timer = null;
div1.addEventListener('touchstart', function (e) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
var move = function (e) {
directionX = e.touches[0].pageX - startX;
directionY = e.touches[0].pageY - startY;
if (directionY > 0) {
if (directionY <= 200) {
div1.style.paddingTop = directionY + 'px';
} else {
directionY = 200
}
} else {
div1.removeEventListener('touchmove',move);
div1.removeEventListener('touchend',end)
}
};
var end = function (e) {
clearInterval(timer);
timer = setInterval(function () {
if (directionY <= 0) {
clearInterval(timer);
directionY = 0;
div1.removeEventListener('touchmove',move);
div1.removeEventListener('touchend',end);
setTimeout(function () {
div1.style.paddingTop = 0;
}, 2000)
}
directionY =- 1;
div1.style.paddingTop = directionY + 46 + 'px';
}, 4);
};
div1.addEventListener('touchmove', move);
div1.addEventListener('touchend', end);
}, false);
</script>
</body>
</html>