一、背景

最近承接了一个需求，需要在H5页面移动端实现手滑动上移动，下滑下移动，我一看就用到了滑动的三个事件touchstart、touchmove、touchend，顾名思义，touchstart就是滑动起始的触发事件，touchmove就是滑动时的触发事件，touchend就是脱离滑动的触发事件

• 我录制的一个效果图，网上很少见的哟
  

二、心路

只要在移动起始位置记录下触击位置，在移动中计算偏移的量，不断的给偏移位置改值，就可以达到滚动的效果，只要在结束的位置做边界的限制和初始化操作就可以满足到我的一个需求了，那么说干就干

JS 部分

 const MIX_HEIGHT = 360
    const padDiv = document.getElementById('pad')
    let startY = 0
    let distanceY = 0
    let baseHeight = 0  // 原始高度
    padDiv.style.bottom = -MIX_HEIGHT + 'px'
    padDiv.addEventListener('touchstart', e => {
      startY = e.touches[0].clientY
      baseHeight = Math.abs(parseInt(padDiv.style.bottom))
    })
    padDiv.addEventListener('touchmove', e => {
      console.log('touchmove', baseHeight, distanceY)
      distanceY = e.touches[0].clientY - startY
      if (baseHeight === 0 && distanceY < 0) { // 当展示全部的时候，不能再往上滑动，限制住
        padDiv.style.bottom = 0 + 'px'
      } else {
        padDiv.style.bottom = -(baseHeight + distanceY) + 'px'
      }
    })
    padDiv.addEventListener('touchend', () => {
      console.log('end')
      // 滑动结束时：当滑动的距离大于20，展示全部，反之回去
      if (distanceY < -50) {
        padDiv.style.bottom = 0 + 'px'
      } else if (distanceY > 50) {
        padDiv.style.bottom = -MIX_HEIGHT + 'px'
      } else {
        padDiv.style.bottom = -baseHeight + 'px'
      }
      // 移动完成后初始化数据
      startY = 0
      distanceY = 0
    })

然后大家根据自己的业务场景去试试，不好用找我，私信我，注意，这里加了监听事件，记得销毁哟！！