使用fullpage.js实现全屏滚动经验以及踩的坑

全屏滑动一般用在官方网站使用较多这种效果，有很多插件可以实现这种效果，像swiper,fullpage,iscroll等。鉴于fullpage没用过，所以就选择它进行尝试一下。
首先在网上搜索fullpage.js，会搜出一大堆相关博客，看了之后发现还是很简单的。html中的结构就是

<div id="fullpage">
    <div class="section">第一屏div>
    <div class="section">第二屏div>
    <div class="section">第三屏div>
div>

css只需要在head标签内加上这句代码

<link href="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.css" rel="stylesheet">

js中需要这样

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js">script>
<script src="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.js">script>
<script type="text/javascript">
        $(function(){
            $('#fullpage').fullpage();
        });
script>

这样基本上一个全屏滚动就ok了，但是现实项目需要的东西可能会更多一些，比如在官网上要有个导航的菜单，每滚动一屏对应的菜单出现激活状态。其实这种功能fullpage.js内部已经封装好了,直接使用即可对应的html和js添加一些代码即可。
html:

<div id="fullpage">
    <div class="section">第一屏div>
    <div class="section">第二屏div>
    <div class="section">第三屏div>
div>
<ul id="menu">
    <li data-menuanchor='page1' class="active">
        <a href="#page1">第一页a>
    li>
    <li data-menuanchor='page2'>
        <a href="#page2">第二页a>
    li>
    <li data-menuanchor='page3'>
        <a href="#page3">第三页a>
    li>
ul>

每添加一屏，就添加一个div.section即可。作为导航菜单的ul不管放在#fullpage里面还是外面都对全屏滚动是没影响的。
js:

<script>
    $(function() {
        $('#fullpage').fullpage({
            sectionsColor: ['#fff', '#fff', '#f4f5f7'],
            anchors: ['page1', 'page2', 'page3'],
            menu: '#menu',
            scrollingSpeed: 1000,
        });
    });
script>

自己在style中给#menu li.active a添加一个激活状态的样式你就能看到效果了。
ok,不出意外，现在你获得了一个可以自定义导航菜单的能够全屏滚动的页面。但是这时候如果设计别处心裁，最后一屏幕内容装不下，再添加一屏又多余，就是怎么能随意的改变其中一屏的高度，其实很简单，只需要再fullpage方法中添加一个参数：scrollOverflow: true即可。当然不要忘记引入一个

这样就不用担心内容超出一屏的内容无法显示了。可以在任意一屏随意的溢出并能准确衔接下一屏幕的内容了。

ok,现在说说这个过程中踩过的坑吧。
1.内容溢出scrollOverflow:true设置失效问题。原因：（1）js版本不同导致的（2）scrollOverflow单词拼写错误。
2.自定义的导航菜单active添加不上，激活状态失效。原因：（1）单词拼写错误data-menuanchor写成了data-menuanchors，多了个s，害我找了半天没找出原因，也是醉醉的。
ok,综上所述，其实单词拼写错误是我大意了，没有去看api,只是从别人的博客中把用到的代码复制过来了而已，根本没想到别人是不是拼错了之类的。至于js版本不一样的问题，我也看到网友有提供过这种答案，但是并没有说清到底哪个js，那些需要什么样的版本，其实在http://www.bootcdn.cn/fullPage.js/这个网址里面一看就清楚了，当jquery.fullpage.css和jquery.fullpage.js和scrolloverflow.min.js这三个版本一致的时候，我试了几个jq版本也没有出现问题，所以，版本要相同指的是jquery.fullpage.css ，scrolloverflow.min.js， jquery.fullpage.js这几个js相同。

以上就是这次使用fullpage.js出现过的问题了。希望能帮到大家。也希望大家不要踩我踩过的坑吧。