android - 是否可以为网页(移动设备)的 "over scrolled"(退回)区域设置图像？

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 中经历过这样的事情。您也许可以创建一个动画，当滚动到达页面底部或页脚时会发生这种情况，但我不认为可以做任何事情来填充空白区域。它很可能是基于浏览器的。