实现Parallax滚动时出现双滚动条，求修复方案

问题根源 #

双滚动条的核心原因是两个独立滚动容器同时生效：

• .wrapper设置了height:100vh和overflow-y:auto，自身会生成滚动条来容纳内部视差区域与正文内容
• Footer在.wrapper外部，会撑开body整体高度，导致body/html也生成滚动条

直接给body/html加overflow:hidden会裁切Footer，并非合理解决方式。

解决方案（两种可选） #

方案1：将Footer移入Wrapper内部

让整个页面滚动逻辑统一由.wrapper处理，body/html不再产生滚动条：
修改HTML结构，把Footer标签放到<main class="wrapper">末尾：

<main class="wrapper">
  <div class="parallax">...</div>
  <section>...</section>
  <!-- 把Footer移到此处 -->
  <footer class="text-center text-white">...</footer>
</main>

.wrapper原有CSS无需额外修改。

方案2：调整Wrapper高度规则，让Body统一处理滚动

若不想改动HTML结构，可修改.wrapper的CSS，取消自身滚动，让body/html作为唯一滚动容器：

.wrapper {
  /* 替换height:100vh，确保内容能撑开高度，同时抵消顶部margin */
  min-height: calc(100vh - 3.5rem);
  /* 移除overflow-y:auto，不再生成自身滚动条 */
  /* overflow-y: auto; */
  overflow-x: hidden;
  perspective: 10px;
  margin-top: 3.5rem;
}

同时添加全局规则避免横向滚动：

html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

该方式下视差滚动效果不受影响，整个页面仅保留body的滚动条。

验证说明 #

两种方案均可彻底解决双滚动条问题：方案1适合希望滚动区域完全包裹所有内容的场景，方案2适合保留原有HTML结构的需求，可根据实际情况选择。

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