CSS，浮动无限滚动绘制

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>

Answer 1

我建议您在项目中添加视差效果。这是适合您需要的东西。 YouTube 上有很多视频解释了该效果。这是 YouTube video 的精彩解释。

CSS，浮动无限滚动绘制

问题描述投票：0回答：1

1个回答

最新问题

CSS，浮动无限滚动绘制

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1