開發(fā)中遇到一個需求，大概是實現(xiàn)仿抖音的視頻播放頁面彈出評論區(qū)，下拉回彈等效果，開始用的定位，利用滾動條的高度定位計算，結(jié)果是在蘋果手機(jī)上運(yùn)行的還可以，但是在安卓手機(jī)上體驗效果不是很流暢，后決定用transform 中的 translateY屬性，開發(fā)時參考了網(wǎng)上的一篇文章，但是由于整理這個筆記的時候離當(dāng)時開發(fā)過去了很久，那篇文章鏈接我搜索不到了，所以沒有附...

下面的代碼可以直接拷貝到html里運(yùn)行看效果，我開發(fā)時是用vue寫的，這是為了讓大家最快速看到符不符合自己的需求整理的。

html

  <div class="dragwrap">
    <!-- 從這里 開始是可以拖拽的區(qū)域 -->
    <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>
      <!-- 這里是可滾動的評論區(qū)域 -->
      <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) { // 拖拽標(biāo)題 或者 此時可滾動區(qū)域沒有滾動高度
        let fs = false;
        if (scrolling) { // 滾動結(jié)束，正好停在沒有滾動高度的情況，重新賦值
          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 () {
        // 關(guān)閉頁面
      }, 100);
    }