如何实现动画完成后恢复常规滚动？（基于FullPage.js）

核心思路 #

先禁用FullPage的自动滚动与交互能力，执行开场动画；动画完成后，重新启用FullPage的正常滚动逻辑，同时确保页面始终停留在初始位置（首屏）。

1. 初始化FullPage时禁用交互 #

初始化阶段关闭FullPage的自动滚动、触摸响应等功能，让页面保持静态：

// 初始化FullPage，先禁用核心滚动功能
new fullpage('#fullpage', {
  autoScrolling: false,
  touchSensitivity: 0,
  scrollHorizontally: false,
  // 保留你的其他配置项（如sectionsColor、navigation等）
});

2. 绑定动画结束事件，恢复FullPage功能 #

根据你开场动画的实现方式，选择对应的触发时机：

场景A：CSS关键帧动画 #

给动画元素绑定animationend事件，动画结束后恢复FullPage：

// 假设你的开场动画容器类名为.intro-animation
const introAnim = document.querySelector('.intro-animation');

introAnim.addEventListener('animationend', () => {
  // 启用自动滚动
  fullpage_api.setAutoScrolling(true);
  // 恢复触摸灵敏度（默认值为5，可按需调整）
  fullpage_api.setTouchSensitivity(5);
  // 若需横向滚动，也恢复对应配置
  // fullpage_api.setScrollHorizontally(true);
});

场景B：JavaScript动画库（如GSAP） #

在动画的完成回调中直接启用FullPage：

// 示例GSAP开场动画（按需修改动画参数）
gsap.to('.intro-animation', {
  duration: 2.5,
  y: -100,
  opacity: 0,
  onComplete: () => {
    fullpage_api.setAutoScrolling(true);
    fullpage_api.setTouchSensitivity(5);
  }
});

3. 避免页面跳转到末尾的关键设置 #

• 初始化时不要手动调用fullpage_api.moveTo()方法，FullPage默认会定位到第一个section
• 若页面存在长内容section，开场期间autoScrolling: false会让页面保持在顶部，不会自动滚动到底部
• 可选：给body添加临时样式，彻底锁死页面滚动（防止用户通过滚轮/触摸触发意外滚动）：

/* 动画期间的body样式 */
body.intro-locked {
  overflow: hidden;
  touch-action: none;
}

// 动画开始时添加锁
document.body.classList.add('intro-locked');
// 动画结束时解锁
introAnim.addEventListener('animationend', () => {
  document.body.classList.remove('intro-locked');
  // 其他恢复FullPage的代码...
});

内容的提问来源于stack exchange，提问作者Timo Leon Krause