实现可滚动Hero Image：背景滚至指定高度后仅滚动页面内容

云上老周

2026-6-20

问题描述

我在Figma中制作了一张1920×1600尺寸的背景图，计划将其作为Hero Image使用。但当前屏幕分辨率可能为1920×800，且页面需添加其他内容。我期望实现：用户向下滚动页面时，背景图随滚动移动，直至其完整高度（1600px）显示完毕，之后仅页面内容滚动。我编写了如下CSS及HTML代码来设置背景，但目前页面无法滚动，仅能看到顶部内容：

原代码

CSS

body {
  overflow-y: hidden;
  margin: 0;
}

.background_container {
  background-color: #444444;
  background-image: url("https://i.sstatic.net/mL8LVRMD.png");
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: absolute;
}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="background_container">

  </div>

  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>

  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>
  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>
  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>
  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>
  <p class="txt"> Example1 </p>
  <p class="txt"> Example2 </p>
  <p class="txt"> Example3 </p>
  <p class="txt"> Example4 </p>
  <p class="txt"> Example5 </p>
  <p class="txt"> Example6 </p>
  <p class="txt"> Example7 </p>
  <p class="txt"> Example8 </p>
  <p class="txt"> Example9 </p>

</body>

</html>

问题原因

页面无法滚动的直接原因是body设置了overflow-y: hidden，完全禁用了页面垂直滚动。同时原背景容器高度仅为100vh，无法容纳完整的1600px背景图，也无法实现滚动显示完整背景的需求。

解决方案

修改后的CSS

body {
  margin: 0;
  /* 移除overflow-y:hidden，恢复页面滚动功能 */
  min-height: 100vh;
}

.background_container {
  background-color: #444444;
  background-image: url("https://i.sstatic.net/mL8LVRMD.png");
  width: 100vw;
  /* 设置容器高度为背景图完整高度 */
  height: 1600px;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: fixed;
  top: 0;
  left: 0;
}

.content {
  /* 避免内容被背景遮挡，可根据实际需求调整 */
  padding-top: 20px;
  /* 确保内容区域高度足够，支持滚动到背景完全显示后的区域 */
  min-height: 2000px;
}

修改后的HTML（含滚动控制逻辑）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="background_container"></div>

  <div class="content">
    <p class="txt"> Example1 </p>
    <p class="txt"> Example2 </p>
    <p class="txt"> Example3 </p>
    <p class="txt"> Example4 </p>
    <p class="txt"> Example5 </p>
    <p class="txt"> Example6 </p>
    <p class="txt"> Example7 </p>
    <p class="txt"> Example8 </p>
    <p class="txt"> Example9 </p>

    <p class="txt"> Example1 </p>
    <p class="txt"> Example2 </p>
    <p class="txt"> Example3 </p>
    <p class="txt"> Example4 </p>
    <p class="txt"> Example5 </p>
    <p class="txt"> Example6 </p>
    <p class="txt"> Example7 </p>
    <p class="txt"> Example8 </p>
    <p class="txt"> Example9 </p>
    <p class="txt"> Example1 </p>
    <p class="txt"> Example2 </p>
    <p class="txt"> Example3 </p>
    <p class="txt"> Example4 </p>
    <p class="txt"> Example5 </p>
    <p class="txt"> Example6 </p>
    <p class="txt"> Example7 </p>
    <p class="txt"> Example8 </p>
    <p class="txt"> Example9 </p>
    <p class="txt"> Example1 </p>
    <p class="txt"> Example2 </p>
    <p class="txt"> Example3 </p>
    <p class="txt"> Example4 </p>
    <p class="txt"> Example5 </p>
    <p class="txt"> Example6 </p>
    <p class="txt"> Example7 </p>
    <p class="txt"> Example8 </p>
    <p class="txt"> Example9 </p>
    <p class="txt"> Example1 </p>
    <p class="txt"> Example2 </p>
    <p class="txt"> Example3 </p>
    <p class="txt"> Example4 </p>
    <p class="txt"> Example5 </p>
    <p class="txt"> Example6 </p>
    <p class="txt"> Example7 </p>
    <p class="txt"> Example8 </p>
    <p class="txt"> Example9 </p>
    <p class="txt"> Example1 </p>
    <p class="txt"> Example2 </p>
    <p class="txt"> Example3 </p>
    <p class="txt"> Example4 </p>
    <p class="txt"> Example5 </p>
    <p class="txt"> Example6 </p>
    <p class="txt"> Example7 </p>
    <p class="txt"> Example8 </p>
    <p class="txt"> Example9 </p>
  </div>

  <script>
    const bgContainer = document.querySelector('.background_container');
    const bgFullHeight = 1600; // 背景图完整高度

    window.addEventListener('scroll', () => {
      const scrollDistance = window.scrollY;
      const viewportHeight = window.innerHeight;
      // 计算背景完全显示所需的最大滚动距离
      const maxScrollNeeded = bgFullHeight - viewportHeight;

      if (scrollDistance <= maxScrollNeeded) {
        // 未滚动到背景完全显示，背景随页面滚动移动
        bgContainer.style.top = `-${scrollDistance}px`;
      } else {
        // 背景已完全显示，固定位置不再移动
        bgContainer.style.top = `-${maxScrollNeeded}px`;
      }
    });
  </script>
</body>

</html>

实现说明

恢复页面滚动：移除body的overflow-y:hidden，让页面可以正常垂直滚动。
适配背景高度：将背景容器高度设为1600px，匹配背景图完整尺寸，确保能显示全部内容。
滚动逻辑控制：通过监听滚动事件，动态调整背景容器的top值，实现滚动时背景跟随移动，直到完全显示后固定位置。
内容区域优化：将页面内容放入单独容器，设置足够的最小高度，保证用户可以滚动到背景完全显示后的区域。

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

实现可滚动Hero Image：背景滚至指定高度后仅滚动页面内容

原代码 #

CSS #

HTML #

问题原因 #

解决方案 #

修改后的CSS #

修改后的HTML（含滚动控制逻辑） #

实现说明 #

原代码