H5移动端实现pad弹窗手上滑上移动，手下滑下移动（和高德地图上的展示框类似）

一、背景

最近承接了一个需求，需要在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