实现一个元素垂直滑动

  <!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">
  <title>Document</title>
  <style>
  div{
  width: 100px;
  height: 200px;
  background-color: #0f0;
  }
  </style>
  </head>
  <body>
  <div></div>
  <script>
  // 1. 获取div
  var div = document.querySelector('div');
  // 2. 获取手指开始的Y的位置
  // 3. 获取手指滑动中的时候Y的位置
  // 4. 用滑动中的Y位置 - 开始Y的位置 = 手指移动的距离
  // 5. 把手指移动距离设置给div的位移
  // 开始的Y 滑动中的Y 滑动距离Y 当前的位置
  var startY = moveY = distanceY = currentY = 0;
  div.addEventListener('touchstart', function (e) {
  startY = e.touches[0].clientY;
  });
  div.addEventListener('touchmove', function (e) {
  moveY = e.touches[0].clientY;
  distanceY = moveY - startY;
  // console.log('startY'+startY);
  // console.log('moveY'+moveY);
  // console.log('distanceY'+distanceY);
  // 把距离设置给div的位移 注意带单位(currentY+distanceY) 加上之前的位置和当前滑动的距离 最终位移 带括号
  div.style.transform = 'translateY('+(currentY+distanceY)+'px)';
  });
  // 当 松开手的时候 把之前div已经移动到位置作为下一次起点
  div.addEventListener('touchend', function (e) {
  //当前的位置 += 之前所有的距离的和
  currentY += distanceY;
  });
  </script>
  </body>
  </html>
posted @ 2018-07-24 17:19  昆仑小道士  阅读(121)  评论(0)    收藏  举报