3

我有一个 div 作为抽屉，用户可以从窗口顶部拉下它，其中包含十几个带有一些样式的按钮。

在拉动它时展开/折叠该 div 的代码是：

      drawer.style.height = `${Math.min(drawerParams.maxheight,drawerParams.startHeight + event.y - drawerParams.startY)}px`;

它在计算机上运行良好，但我在手机上严重滞后。这是用于移动设备的 chrome devtools 的图片：

chrome devtools 的性能时间表

这是该布局的结构和 CSS：

<style>
      .main {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .drawer {
        position: absolute;
        top: 0;
        width: 100vw;
        background-color: lightgreen;
        min-height: 7px;
        z-index: 4;
      }
      .drawer-content {
        position: absolute;
        bottom: 7px;
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: space-between;
      }
      .handle {
        position: absolute;
        width: 100%;
        bottom: 0;
        height: 7px;
      }
    </style>
    
    <div class="main">
      <div class="drawer">
        <div class="drawer-content">
          <div class="button">button1</div>
          <div class="button">button2</div>
          <div class="button">button3</div>
          <div class="button">button...</div>
          <div class="button">button10</div>
        </div>
        <div class="handle">
          <!-- some svg -->
        </div>
      </div>
    </div>

如果我将初始抽屉的位置设置为“top:200px”，我会看到内容已经存在，当从该位置拉出它时，我会遇到同样的性能问题。

我尝试在本文中使用 transform:translateY() ：link，但没有效果。（我认为这是因为我没有从过渡开始到结束进行翻译，而是针对鼠标移动的每个像素都有一个翻译......？）

所以问题是（来自图片）：

1：每次抽屉元素的高度发生变化时，浏览器是否会重新绘制 div？

2：为什么？

3：我可以改变什么来避免这种情况？

4

0 回答 0