如何阻止fullpage.js为页面首个section添加active类？

嘿，这个问题我之前碰到过好几次，fullpage.js默认给第一个section加fp-active类的行为确实有点棘手，不过有几个不同的方案可以解决，看你的需求来选：

方案1：用MutationObserver实时拦截（彻底阻止，无闪屏） #

这个方法能精准阻止fullpage给首个section添加active类，原理是监听元素的类属性变化，一旦检测到fp-active被添加就立刻移除，几乎不会有视觉闪屏：

// 先获取首个section元素
const firstSection = document.querySelector('.fp-section:first-child');

// 配置MutationObserver监听类属性变化
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'class' && firstSection.classList.contains('fp-active')) {
      firstSection.classList.remove('fp-active');
      // 拦截一次后就停止监听，避免不必要的性能消耗
      observer.disconnect();
    }
  });
});

// 启动监听
observer.observe(firstSection, { attributes: true });

// 初始化fullpage
new fullpage('#fullpage', {
  // 你的其他配置项，比如sectionsColor、navigation等
});

方案2：初始化后立即移除（简单但可能有闪屏） #

如果你的动画不是特别敏感，这个方法最直接——等fullpage渲染完成后，手动移除首个section的active类：

new fullpage('#fullpage', {
  afterRender: function() {
    // 移除首个section的active类
    document.querySelector('.fp-section:first-child').classList.remove('fp-active');
  },
  // 你的其他配置
});

注意：如果你的动画触发很快，可能会看到一瞬间的动画效果，适合对视觉体验要求不极高的场景。

方案3：用CSS覆盖动画效果（无需修改JS） #

如果你只是不想看到active类触发的动画，而不是一定要移除这个类，直接用CSS重置相关样式更简单：

/* 重置首个active section的动画效果 */
.fp-section:first-child.fp-active {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  /* 根据你的动画需求，添加其他需要重置的样式 */
}

这个方法完全不用改JS，而且没有任何闪屏问题，适合只是想屏蔽动画触发的场景。

内容的提问来源于stack exchange，提问作者Yurii N.