如何解决fullpage.js垂直滑块遮挡网站下方其他区块的问题

阿华AIGC实验室

2026-4-29

嘿，我来帮你解决这个fullpage.js的问题！你遇到的情况其实是fullpage.js的默认行为加上结构错误导致的，别着急，咱们一步步来修复：

首先，你混淆了fullpage.js里section和slide的核心概念——section是垂直滚动的页面单元，而slide是每个section内部的横向切换滑块。你现在直接把slide作为#fullpage的子元素，fullpage会把它们当成同一个section里的横向滑块，整个#fullpage容器会被强制设置为占满整个视口高度，同时fullpage还会自动修改body和html的样式为overflow: hidden，这就导致你后面的home_container和footer被挤到了视口之外，而且因为overflow被隐藏，滚动也看不到它们。

接下来是具体的修复方案：

步骤1：修正HTML结构

把原来的slide类改成section，然后把你需要显示的后续内容（home_container、footer）放到fullpage的最后一个section里，并且给这个section加上fp-auto-height类——这个类是fullpage官方提供的，用来让section自适应内容高度，而不是强制占满视口。修改后的结构如下：

<div id="fullpage">
  <div class="section" id="slide_1">
    <div class="slide_caption">
      <h1>This is slide 1</h1>
      <h4>slide 1 description</h4>
      <a href="#">Read More</a>
    </div>
  </div>
  <div class="section" id="slide_2">
    <div class="slide_caption">
      <h1>This is slide 2</h1>
      <h4>slide 2 description</h4>
      <a href="#">Read More</a>
    </div>
  </div>
  <div class="section" id="slide_3">
    <div class="slide_caption">
      <h1>This is slide 3</h1>
      <h4>slide 3 description</h4>
      <a href="#">Read More</a>
    </div>
  </div>
  <div class="section" id="slide_4">
    <div class="slide_caption">
      <h1>This is slide 4</h1>
      <h4>slide 4 description</h4>
      <a href="#">Read More</a>
    </div>
  </div>
  <!-- 把后续内容放到这个自适应高度的section里 -->
  <div class="section fp-auto-height">
    <section class="full_width_container" id="home_container_1">
      <!-- 你的产品等内容 -->
    </section>
    <section class="full_width_container" id="home_container_2">
      <!-- 你的新闻等内容 -->
    </section>
    <section class="full_width_container" id="home_container_3">
      <!-- 你的评价等内容 -->
    </section>
    <section class="full_width_container" id="home_container_4">
      <!-- 你的博客链接等内容 -->
    </section>
    <footer>
      <!-- 你的页脚内容 -->
    </footer>
  </div>
</div>

步骤2：正确初始化fullpage.js

确保你的初始化代码配置了合适的选项，比如关闭横向滚动（因为你要的是垂直滑块），示例代码如下：

new fullpage('#fullpage', {
  autoScrolling: true, // 启用全屏自动滚动
  scrollHorizontally: false, // 禁用横向滚动（我们用section做垂直页面）
  // 可选：添加响应式配置，在小屏幕上禁用全屏滚动
  responsiveWidth: 768,
  responsiveBehavior: 'normal'
});