是否可以为网页的“过度滚动”（反弹）区域（用于移动设备）设置图像？

Question

大多数移动浏览器都有一个默认行为，允许用户在到达页面顶部或底部时继续滚动，在页面顶部或底部留下空白区域。然后整个页面将弹回以填充空白区域。在原生 iOS 应用程序中，我们可以轻松地为这些顶部和底部区域设置图像甚至交互元素。我想知道这是否可以用于纯 Web 应用程序。

我尝试的是设置html,body的背景图片，例如：

html, body {
  background: url(../img/topnotification.jpg) no-repeat top center;
  background-size: contain;
}

不幸的是，这不起作用，因为似乎输入正文被过度滚动了。我想知道我们是否可以为移动网站的顶部和底部空白滚动区域设置特殊属性。

我也试过了：

html:before, body:before {
  width: 100%;
  height: 100%;
  top: -100%;
  position: absolute;
  background: url(../img/topnotification.jpg) no-repeat top center;
  background-size: contain;
  overflow: visible;
}

这显然也不起作用。

Answer 1

我相信这完全取决于浏览器，因为我不知道有任何 html 元素指定过度滚动导致的空白。 就我个人而言，我从未在 windows、chrome 和 android 中经历过这样的事情。 您也许可以创建一个在滚动到达页面底部或页脚时发生的动画，但我认为无法做任何事情来填充空白。它很可能是基于浏览器的。