是否可以将背景图像添加到 html 中的滚动反弹区域？答案

【问题标题】：Is it possible to add a background image to the scroll-bounce area in html?是否可以将背景图像添加到 html 中的滚动反弹区域？
【发布时间】：2022-01-30 02:10:29
【问题描述】：

大多数浏览器都支持网站上的滚动弹跳，因此当您滚动到网站的顶部或底部时，它会“弹跳”，而不是突然停止。

通常页面“弹跳”时露出的额外区域是纯白色，但您可以将背景色元素应用到标签，该额外区域将呈现该颜色（你可以在这里看到这个描述和实际操作：Example Site）

在这里您可以看到使用自定义颜色而不是白色的滚动弹跳：

我想要达到的效果是当页面弹跳时，scroll-bounce 区域有一个背景图片，而不是单纯的颜色。我认为这种效果可以通过一些与网站品牌平铺的简单图标看起来不错。我记得几年前在 css-tricks.com 上看到过这个效果，但我不知道这个效果是如何实现的，或者它的实现方式是否已经被弃用了。

据我了解，不可能将 background-image 属性添加到标记，但这是否可以通过变通方法来实现？或许可以使用 overscroll-behavior 属性取消滚动反弹行为，并在页面边缘上方或下方滚动时使用 javascript 创建类似的外观效果？

【问题讨论】：

改为将其添加到正文中，如果需要不同，则对剩余内容使用包装器。这样做时请确保不要为 html 应用背景。
@prettyInPink 这非常适合我。如果您将其作为答案，我会将其标记为正确答案。

标签： javascript html css scroll overflow

【解决方案1】：

不确定这是否可行（因为我还没有尝试过），但您可以使用 position: absolute/fixed 获取图像元素（绝对或固定，具体取决于放置 img 标签的位置）并设置 - bottom: <height of the image> 和left: 0。这样，图像在技术上存在于视口上方，并且只有在您尝试滚动经过导航栏时才会可见，这将导致反弹效果。

【讨论】：