如何仅在Safari橡皮筋滚动超出文档末尾时显示图片部分内容？

完全可以实现这个需求，核心是利用Safari的橡皮筋滚动（overscroll）特性，通过CSS定位控制图片的显示区域，具体实现如下：

1. 基础页面样式设置 #

先确保页面至少撑满视口，为橡皮筋滚动提供触发空间：

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh; /* 确保页面高度至少等于视口高度 */
  position: relative; /* 为绝对定位的图片提供参考坐标系 */
}

2. 页脚图片定位 #

通过绝对定位让图片上半部分与文档底部衔接，下半部分隐藏在文档之外：

.footer-image {
  position: absolute;
  bottom: -100px; /* 假设图片总高度200px，向上偏移100px，让上半部分露出 */
  left: 0;
  width: 100%;
  height: 200px; /* 图片总高度，为正常显示区域的2倍 */
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
  pointer-events: none; /* 避免图片干扰页面滚动、点击等交互 */
}

3. HTML结构 #

在页面末尾添加目标图片元素：

<body>
  <!-- 页面主体内容 -->
  <img src="your-image-path.jpg" alt="页脚拓展图片" class="footer-image">
</body>

效果说明 #

• 正常滚动到底时，视口底部刚好对齐文档底部，此时仅能看到图片的上半部分（100px高度）。
• 触发Safari橡皮筋滚动时，页面会被向上拉动，视口范围延伸到文档之外，图片的下半部分（100px高度）会逐渐显示出来。

你可以根据需求调整bottom值和图片总高度：比如想要正常显示150px，就把bottom设为-150px，图片总高度设为300px即可。

内容的提问来源于stack exchange，提问作者Vladimir Keleshev