Fullpage.js中禁止滚动切换区块但保留锚点导航的实现方案

这个问题确实挺棘手的，Fullpage.js默认的onLeave回调参数里确实没直接提供触发源的区分方式，但我们可以通过自定义状态标记的方法来绕开这个限制，实现仅阻止滚动触发的区块切换，同时保留锚点导航的功能。

具体实现步骤： #

1. 定义状态标记变量
   先声明一个全局变量，确保在回调里能访问到，用来标记当前的跳转是否是由锚点点击触发的：

   let isAnchorTriggered = false;
   

2. 给所有锚点链接添加点击事件监听
   找到页面中所有指向Fullpage区块的锚点链接（比如带href="#sectionX"的<a>标签），在点击时将状态标记设为true，并通过setTimeout在短时间内重置，避免影响后续的滚动操作：

   document.querySelectorAll('a[href^="#section"]').forEach(link => {
     link.addEventListener('click', () => {
       isAnchorTriggered = true;
       // 重置标记，防止影响下一次滚动判断
       setTimeout(() => {
         isAnchorTriggered = false;
       }, 100);
     });
   });
   

3. 修改onLeave回调逻辑
   在原有的onLeave回调里，先判断状态标记：如果是锚点触发的跳转，直接放行；如果是滚动触发的，再判断是否从第一个区块离开，是则阻止切换：

   new fullpage('#fullpage', {
     scrollOverflow: true,
     onLeave: function(origin, destination, direction) {
       // 优先判断是否是锚点触发的跳转
       if (isAnchorTriggered) {
         return true; // 允许锚点跳转
       }
       // 仅阻止滚动触发的从第一个区块离开的行为
       if (origin.index === 0) {
         return false;
       }
     }
   });
   

原理说明： #

• 当用户点击锚点链接时，我们先标记这次跳转是锚点触发的，onLeave回调检测到这个标记后就不会阻止跳转；
• 标记会在100ms后自动重置，这样后续的滚动操作就会回到正常的判断逻辑，不会被之前的锚点点击影响；
• 这个方法利用了事件触发顺序：锚点点击事件会先于Fullpage的onLeave回调执行，所以我们能提前设置好标记。

额外注意事项： #

• 如果你的锚点链接是动态生成的（比如通过JS添加到页面），记得在元素生成后再绑定点击事件，或者使用事件委托的方式监听父元素的点击事件；
• 调整setTimeout的时间时，确保它足够覆盖Fullpage处理锚点跳转的时间，一般100ms足够，不用设太长。

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