仿抖音评论页手指下拉回弹

开发中遇到一个需求，大概是实现仿抖音的视频播放页面弹出评论区，下拉回弹等效果，开始用的定位，利用滚动条的高度定位计算，结果是在苹果手机上运行的还可以，但是在安卓手机上体验效果不是很流畅，后决定用transform 中的 translateY属性，开发时参考了网上的一篇文章，但是由于整理这个笔记的时候离当时开发过去了很久，那篇文章链接我搜索不到了，所以没有附...

下面的代码可以直接拷贝到html里运行看效果，我开发时是用vue写的，这是为了让大家最快速看到符不符合自己的需求整理的。

html

  <div class="dragwrap">
    <!-- 从这里 开始是可以拖拽的区域 -->
    <div class="dragbox" ontouchstart="dragStart(event)" ontouchmove="dragMove(event)" ontouchend="dragEnd(event)">
      <!-- 这里是固定的title，比如xx条评论 -->
      <div class="title" ontouchstart="titleStart(event)" ontouchend="titleEnd(event)"> title </div>
      <!-- 这里是可滚动的评论区域 -->
      <div class="scroll">
        <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>
          <li>11</li>
          <li>12</li>
          <li>13</li>
          <li>14</li>
          <li>15</li>
          <li>16</li>
          <li>17</li>
          <li>18</li>
          <li>19</li>
          <li>20</li>
        </ul>
      </div>
    </div>
  </div>

css

 body,html{
      background-color: rgba(0, 0, 0, 1);
    }
    .dragwrap {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 491;
      width: 100%;
      height: 600px;
    }

    .dragwrap .dragbox {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 14px 14px 0 0;
      background-color: pink;
    }

    .dragwrap .dragbox .title {
      text-align: center;
      line-height: 44px;
    }

    .dragwrap .dragbox .scroll {
      height: 100%;
      overflow: scroll;
      border-top: 1px solid #fff;
    }

    .dragwrap .dragbox .scroll ul {
      padding-bottom: 44px;
    }

    .dragwrap .dragbox .scroll ul li {
      padding: 20px;
    }

js

 let el, scroll;
    let startY = null,
      scrolling = false,
      newY = null,
      isTitle = false;

    open();
  
    function titleStart() {
      isTitle = true;
    }
    function titleEnd() {
      isTitle = false;
    }

    // 拖拽开始
    function dragStart(e) {
      let ev = e.touches ? e.touches[0] : e;
      startY = ev.clientY; // 最开始的startY是手指触摸到的clientY（相对于浏览器y轴的位置）
      el.style.transition = null;
    }
    function dragMove(e) {
      if (startY == null) {
        return;
      }
      let ev = e.touches ? e.touches[0] : e;
      if (scroll.scrollTop <= 0 || isTitle) { // 拖拽标题 或者 此时可滚动区域没有滚动高度
        let fs = false;
        if (scrolling) { // 滚动结束，正好停在没有滚动高度的情况，重新赋值
          startY = ev.clientY;
          scrolling = false;
          fs = true;
        }
        newY = ev.clientY - startY;
        if (newY < 0) {
          newY = 0;
        }
        el.style.transform = `translateY(${newY}px)`;
        if (!fs && newY > 0 && e.cancelable) {
          e.preventDefault();
        }
      } else {
        // 有滚动高度
        scrolling = true;
        newY = ev.clientY - startY; 
      }
    }
    function dragEnd(e) {
      el.style.transition = `transform 0.3s`;
      if (scroll.scrollTop <= 0) {
        if (newY && newY > el.offsetHeight / 2) {
          close();
        } else {
          el.style.transform = 'translateY(0)';
        }
      } else {
        el.style.transform = 'translateY(0)';
      }
      startY = null;
      newY = null;
    }
    function open() {
      el = document.querySelector('.dragbox');
      scroll = document.querySelector('.scroll');
      el.style.transition = null;
      el.style.transform = `translateY(${el.offsetHeight}px)`;
      setTimeout(function () {
        el.style.transition = `transform 0.3s`;
        el.style.transform = 'translateY(0)';
      }, 20);
    }
    function close() {
      el.style.transition = `transform 0.3s`;
      el.style.transform = `translateY(${el.offsetHeight}px)`;
      setTimeout(function () {
        // 关闭页面
      }, 100);
    }