如何在fullpage.js滚动时在两区块间添加自动划过的白色空白段

嘿，这个需求用fullpage.js完全能实现，我给你捋个清晰的步骤，照着做就行！

核心思路 #

在两个正常内容section之间插入专门的「空白section」，通过fullpage的回调函数让滚动到空白区块时自动快速跳转到下一个内容section，同时设置空白区块的样式和高度。

步骤1：修改HTML结构 #

在需要添加空白的section之间插入带特殊类名的section，比如.blank-section：

<div id="fullpage">
  <div class="section">第一个内容区块</div>
  <!-- 白色空白区块 -->
  <div class="section blank-section"></div>
  <div class="section">第二个内容区块</div>
  <!-- 白色空白区块 -->
  <div class="section blank-section"></div>
  <div class="section">第三个内容区块</div>
</div>

步骤2：设置空白区块的CSS样式 #

给空白区块设置白色背景和自定义高度（注意加!important覆盖fullpage默认的全屏高度）：

.blank-section {
  height: 100px !important; /* 你想要的空白高度，可自行调整 */
  background-color: #ffffff; /* 白色背景 */
}

步骤3：配置fullpage.js实现快速划过效果 #

初始化fullpage时，利用onLeave回调检测是否进入空白区块，自动快速滚动到下一个/上一个内容section，同时恢复默认滚动速度：

new fullpage('#fullpage', {
  scrollSpeed: 700, // 正常内容区块的滚动速度
  css3: true, // 开启CSS3动画，确保滚动流畅
  onLeave: function(origin, destination, direction) {
    // 判断即将进入的区块是否是空白区块
    if (destination.item.classList.contains('blank-section')) {
      // 临时设置极快的滚动速度
      fullpage_api.setScrollSpeed(100);
      
      // 根据滚动方向，跳转到对应的内容区块
      if (direction === 'down') {
        fullpage_api.moveSectionDown();
      } else {
        fullpage_api.moveSectionUp();
      }
      
      // 滚动完成后恢复默认速度，避免影响后续正常滚动
      setTimeout(() => {
        fullpage_api.setScrollSpeed(700);
      }, 100);
    }
  },
  // 可选：如果开启了导航点，排除空白区块的导航条目
  navigation: true,
  excludeSections: '.blank-section'
});

额外小提示 #

• 如果不希望空白区块有任何交互（比如点击滚动），可以给.blank-section加pointer-events: none，防止误触。
• 空白高度可以根据需求自由调整，比如80px、120px都可以。

这样设置之后，滚动时遇到空白区块就会自动快速划过，完全符合你想要的效果啦！

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