全屏滑動一般用在官方網站使用較多這種效果，有很多外掛可以實現這種效果，像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即可。當然不要忘記引入一個
<script src="https://cdn.bootcss.com/fullPage.js/2.9.5/vendors/scrolloverflow.min.js"></script>
這樣就不用擔心內容超出一屏的內容無法顯示了。可以在任意一屏隨意的溢位並能準確銜接下一螢幕的內容了。

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出現過的問題了。希望能幫到大家。也希望大家不要踩我踩過的坑吧。