Question

我想创建一个移动友好的页面，其中包含：

用户可以上下滚动的背景
从页面底部开始的前景抽屉，用户可以向上拉动并连续滚动到背景顶部。

在下图中，用户可以滚动浏览背景，但也可以将背景向上拖动到前景上。

我尝试了几种不同的解决方案，包括： 1.使用位置：固定；有浮动托盘问题：触摸事件会传递到下面的背景面板

在主要内容区域中使用带有两个框的flexbox，并使用javascript更改第二个框的高度。

次要问题：如果我通过更改框的px高度来手动控制的滚动行为，则会失去移动浏览器的所有本机滚动行为（例如加速/减速等）。

这是我测试第二种解决方案的代码。

html,
body {
  height: 100%;
  overflow: hidden;
}

#outside-container {
  border: 1px black solid;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dynamic-box {
  border: 10px red solid;
  font-size: 50px;
  color: yellow;
  overflow: scroll;
}

.fixed-size-box {
  border: 10px black solid;
  font-size: 50px;
  overflow: hidden;
  color: orange;
  flex: 0 0 400px;
  /*that's the flex-bais index */
}

.boxes {
  display: flex;
  justify-content: space-around;
}

.boxes div {
  width: 30px;
  height: 30px;
  margin: 30px;
  border: 1px solid black;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div id="outside-container">
    <div class="dynamic-box">
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="boxes">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>

    <div class="fixed-size-box">
      <div> Hello this is floating above</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>A paragraph of text with a <a>Link</a><br />a second row of text</div>
      <div>END OF CONTENT</div>
    </div>
  </div>
</body>

</html>

CSS，浮动无限滚动绘制

0 个答案: