WordPress中fullpage容器后续内容无法滚动显示问题求助

问题根源 #

你当前开启了autoScrolling: true，这会让fullpage.js完全接管页面滚动，把自身容器锁定为全屏高度，强制用户只能在各个section之间切换，自然滚不到容器外面的内容。

两种可行解决办法 #

办法1：保留全屏滚动，允许滚出fullpage容器 #

直接修改fullpage的初始化配置，加上两个关键参数：

• scrollOverflow: true：让最后一屏支持溢出滚动，配合下面的参数实现滚出容器
• fitToSection: false：关闭强制每个section适配屏幕的逻辑，允许滚动到fullpage容器之外

修改后的初始化代码如下：

const fullpageInstance = new fullpage("#fullpage", {
  scrollingSpeed: 1000,
  autoScrolling: true,
  scrollHorizontally: true,
  navigation: false,
  // 新增这两行配置
  scrollOverflow: true,
  fitToSection: false,
  onLeave: function (origin, destination, direction) {
    const words = ["Unknown", "Unseen", "Unfamiliar", "Mystery"];
    const leavingText = origin.item.querySelector("h1");
    const enteringText = destination.item.querySelector("h1");
    const line = destination.item.querySelector(".line");

    // 离开文本动画
    gsap.to(leavingText, {
      opacity: 0,
      y: -100,
      duration: 1.5,
      ease: "power2.out",
    });

    // 进入文本动画
    gsap.fromTo(
      enteringText,
      { y: 100, opacity: 0 },
      {
        y: 0,
        opacity: 1,
        color: destination.item.getAttribute("data-text-color"),
        duration: 1.5,
        ease: "power2.out",
        delay: 0.5,
      }
    );

    // 切换背景与文本颜色
    const newBgColor = destination.item.getAttribute("data-bg");
    const newTextColor = destination.item.getAttribute("data-text-color");
    destination.item.style.backgroundColor = newBgColor;
    gsap.to(line, { color: newTextColor, duration: 0.5 });

    // 线条宽度动画
    const newLineWidth = (destination.index + 1) * 150;
    const currentLineWidth = (origin.index + 1) * 150;

    if (direction === "down") {
      gsap.to(line, {
        width: newLineWidth + "px",
        duration: 1.5,
        ease: "power2.out",
      });
    } else {
      gsap.to(line, {
        width: currentLineWidth + "px",
        duration: 1.5,
        ease: "power2.out",
      });
    }
  },
});

办法2：关闭全屏滚动，恢复原生页面滚动 #

如果不需要fullpage强制全屏切换的效果，只是用它做section动画，直接把autoScrolling改成false，页面会回到正常的滚动逻辑，fullpage的section会按顺序排列，后面的页脚自然就能看到了。

修改后的配置片段：

const fullpageInstance = new fullpage("#fullpage", {
  scrollingSpeed: 1000,
  autoScrolling: false, // 改为false
  scrollHorizontally: true,
  navigation: false,
  // 其他配置保持不变
});

额外提醒 #

• 用办法1的话，尽量让最后一个section的内容高度别超过屏幕太多，不然section内部会出现滚动条，影响体验。
• WordPress里要检查fullpage容器的父元素有没有设overflow: hidden，如果有得去掉，不然还是滚不出去。
• 改完记得清浏览器缓存再测试，避免旧配置残留。

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