fullpage.js的scrollOverflow插件在JSFiddle及个人网站失效问题

我之前也碰到过fullpage.js的scrollOverflow插件在特定环境下罢工的情况，结合你给出的代码和场景来看，问题大概率出在资源加载的跨域限制或者非官方资源的版本兼容性上——毕竟相同代码在Stack Overflow代码片段能正常跑，说明逻辑本身没问题。

问题原因分析 #

• 你当前引用的资源来自个人域名，JSFiddle这类在线编辑器对跨域资源的加载有严格限制，可能导致scrollOverflow插件无法被fullpage.js正确识别；
• 非官方维护的资源可能存在版本不匹配的情况，比如scrollOverflow和fullpage.js的版本不兼容，直接导致插件初始化失败。

解决方案：替换为官方CDN资源 #

改用官方维护的CDN资源，既能避免跨域问题，也能保证版本完全匹配。下面是修正后的完整代码：

<head> 
  <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" rel="stylesheet" /> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/vendors/scrolloverflow.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script> 
</head> 
<body> 
  <div id="fullpage"> 
    <div class="section"> 
      <h1>Lorem ipsum dolor sit amet, cotetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna </h1> 
    </div> 
    <div class="section"> 
      <h1>Lorem ipsum dolor sit amet, cotetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna </h1> 
      <h1>Lorem ipsum dolor sit amet, cotetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna </h1> 
      <h1>Lorem ipsum dolor sit amet, cotetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna </h1> 
      <h1>Lorem ipsum dolor sit amet, cotetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna </h1> 
    </div> 
  </div>

  <script>
    $(document).ready(function() { 
      $("#fullpage").fullpage({ 
        scrollOverflow: true 
      }); 
    });
  </script>
</body>

额外说明 #

• 这里使用了cdnjs上的fullpage.js 3.1.2版本资源，确保scrollOverflow插件和核心库版本完全匹配；
• 官方CDN资源的跨域兼容性更好，在JSFiddle和个人网站上都能稳定加载；
• 务必保持加载顺序：先加载jQuery，再加载scrollOverflow插件，最后加载fullpage.js，这是插件正常工作的必要条件。

把上面的代码复制到JSFiddle或者你的个人网站中，应该就能看到第二个section出现滚动条，scrollOverflow插件正常工作了。

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