javascript - 将元素扩展到 OS X 上的滚动区域

Question

我有一个具有固定背景和底部 float 页脚的页面。

由于 OS X 上的“过度滚动”，用户可以滚动到页面底部，此时背景会暴露在页脚下方。而不是 disabling overscroll对于我的页面，我只想扩展页面底部下方的底部 div 以覆盖背景。

如何在不增加页面高度的情况下做到这一点？如果我调整 div 的大小，可滚动区域就会扩展以匹配。我看过this question ，但这涉及隐藏元素，这意味着它不再覆盖背景。

有没有办法隐藏页面下方过度滚动区域中的元素？

这是一张动图:

当您“过度滚动”时，您可以在屏幕底部的白色区域下方看到背景显示。我不想防止过度滚动，但我想用页面底部的白色 div 隐藏背景。

Answer 1

没有看到 fiddle ，我的第一个想法就是完全按照您提到的去做:增加底部 div 的高度以覆盖多余的滚动。像这样:

.bottom-container {
  position: relative;
  height: /* current height + overflow amount of height */
  top: /* overflow amount of height */
}

所以如果你的底部容器是 400px:

.bottom-container {
  position: relative;
  height: 600px;
  top: 200px;
}

只要没有 overflow: hidden 应用到页面，理论上这样的事情应该可行。

body {
  margin: 0;
  padding: 0;
}
.fixed-background {
  position: fixed;
  height: 100vh;
  width: 100%;
  background: tomato;  
}
.fixed-placeholder {
  height: 100vh;
  background: transparent;
}
.bottom-container {
  position: relative;
  height: 400px;
  width: 100%;
  background: white;
  top: 200px;
}

<div class="fixed-background">
  <h1>Fixed Background</h1>
</div>
<div class="fixed-placeholder"></div>
<div class="bottom-container">
  <h2>More content down here</h2>
</div>