JQUERY全屏滚动插件fullPage.js

10月-29-2016 09-20-08.gif
实例地址：http://kagomejuice.com.cn/health.html

可以实现上图的滚动效果，附赠插件GITHUB：https://github.com/alvarotrigo/fullPage.js/

详细的使用方法是：

1 首先引用CSS、JS、和JQUERY:

<link rel="styleshee" type="text/css" href="css/jquery.fullPage.css">
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

2 HTML文档内容：

<div id="fullpage">
    <div id="p1" class="section active"></div>
    <div id="p2" class="section"></div>
    <div id="p3" class="section"></div>
</div>

fullpage是整个页面的元件，p1~p3是滚动的每一页，用class="section"定义，active是默认选中的页。

3 在文档加载完后调用fullpage功能

$(document).ready(function(){
    $('#fullpage').fullpage({
        afterLoad: scrollLoad,
        onLeave: scrollLeave,
        navigation: true
    });
});

其中afterLoad是某一页加载后的回调函数，onLeave是某一页移出时的回调函数，navigation: true是使用导航点。更多的参数和功能见GITHUB。

那么，问题来了。

这个页面需要适配手机版，我在分辨率改变到手机版尺寸的时候调用取消滚动，分辨率改变到桌面版尺寸的时候调用页面滚动的功能。正常来说是调用$.fn.fullpage.xxxx来使用，但是在MAC SAFARI上页面加载完过后，偶尔会出现$.fn.fullpage是空值（不是必现），就会出现分辨率改变的时候不能滚动和页面出错的问题。

测试了好久，都没发现$.fn.fullpage到底为何会消失，但是页面加载完调用fullpage的初始化都没出现过问题，就是页面分辨率改变的时候出问题。好吧死马当活马医，在初始化的时候把$.fn.fullpage这东西用一个变量把他存起来，需要使用的时候再把值设回去……居然把问题解决了。

虽然问题是好了，但是没搞明白原因心里真不爽啊。