是否可以为＆＃34;滚动＆＃34;设置图像？ （退回）网页区域（移动设备）？

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中经历过这样的事情。 您可能能够创建在滚动到达页面底部或页脚时发生的动画，但我认为无法完成任何操作来填充空白区域。它主要是基于浏览器的。