<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width:100%
}
aside{
height: 100%;
width:100%;
}
.draw{
width: 60px;
height: 500px;
border: 2px solid #ccc;
overflow: hidden;
position: fixed;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
ul::after{
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
ul{
zoom:1;
}
li{
list-style: none;
float: left;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
border: 1px solid #494444;
box-sizing: border-box;
}
</style>
</head>
<body>
<aside class="main">
<div class="draw" id="draw">
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
<li>列表9</li>
<li>列表10</li>
</ul>
</div>
</aside>
<script>
var draw = document.querySelector("#draw");
var ul = draw.children[0];
var startY = 0;
var centerY = 0;
var maxDown = 50;
var maxUp = -(ul.offsetHeight - draw.offsetHeight+maxDown)
var maxUpBounce = 0;
var maxDownBounce = -(ul.offsetHeight - draw.offsetHeight);
ul.addEventListener('touchstart',function(e){
startY = e.changedTouches[0].clientY;
})
ul.addEventListener('touchmove',function(e){
var dy = e.changedTouches[0].clientY - startY;
var tempY = centerY + dy;
if(tempY>maxDown){
tempY = maxDown;
}
if(tempY<maxUp){
tempY = maxUp;
}
ul.style.transform = 'translateY('+tempY+'px)';
})
ul.addEventListener('touchend',function(e){
var dy = e.changedTouches[0].clientY-startY;
centerY = centerY + dy;
if(centerY>maxUpBounce){
centerY=maxUpBounce;
ul.style.transition = 'transform .5s';
ul.style.transform = 'translateY('+centerY+'px)';
console.log('下拉')
}
if(centerY<maxDownBounce){
centerY=maxDownBounce;
ul.style.transition = 'transform .5s';
ul.style.transform = 'translateY('+centerY+'px)'
console.log('上拉')
}
})
</script>
</body>
</html>
扫一扫
274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
