将元素扩展到OS X上的过度滚动区域

Question

我的页面背景固定，底部有浮动页脚。

由于＆＃34;过度滚动＆＃34;在OS X上，用户可以滚动浏览页面底部，此时背景显示在页脚下方。我只是想将页面底部下方的div扩展为背景，而不是disabling overscroll。

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

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

这是一个GIF：

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

Answer 1

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

db.dropDatabase()

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

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

只要没有.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;
}