标签：style bottom distanceY padDiv H5 pad 滑动 移动 baseHeight

一、背景

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

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

标签：style,bottom,distanceY,padDiv,H5,pad,滑动,移动,baseHeight
来源： https://blog.csdn.net/Shaoyouiqng/article/details/120250573

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。