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

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情 >>

开发中遇到一个需求，大概是实现仿抖音的视频播放页面弹出评论区，下拉回弹等效果，开始用的定位，利用滚动条的高度定位计算，结果是在苹果手机上运行的还可以，但是在安卓手机上体验效果不是很流畅，后决定用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);
}