1

我使用will-change: transform了一个使滚动平滑的父元素。但是有一些子 div 尽管使用了position: fixed.

为了演示，我创建了这个基本网页。

在此处输入图像描述

请注意，当我向下滚动红色框时，黄色和绿色框会离开视口。

代码：

<style>
.app {
  background: silver;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  z-index: 99;
  will-change: transform;
}

.yellow-box-left .green-box-right {
  width: 250px;
  max-width: 250px;
}

.yellow-box-left {
  position: fixed;
  left: 0px;
  top: 0px;
  background: yellow;
}

.green-box-right {
  position: fixed;
  right: 0px;
  top: 0px;
  background: greenyellow;
}

.red-box-middle {
  min-height: 100%;
  margin-right: 250px;
  margin-left: 250px;
  position: relative;
  background: indianred;
}

</style>
<html>
  <div class="app">
    <div class="yellow-box-left">
      <!-- A list of words -->
    </div>
    <div class="red-box-middle">
      <!-- A long list to make this scrollable -->
    </div>
    <div class="green-box-right">
      <!-- A list of words -->
    </div>
  </div>
</html>

如何将这些子 div 保持在固定位置？

4

1 回答 1

0

对于您提供的示例，我设法通过will-change: transform将.red-box-middle.

于 2020-07-17T04:12:14.347 回答