最近接觸了好幾次jquery.fullpage.js這個插件，實現整屏的滑動，效果很炫，用fullpage來實現也很簡單，但是也碰到了一些問題和大家分享一下
1.單屏高度超過屏幕高度，實現單屏的滑動
現在客戶用一個需求是這樣的
圖一 圖2 圖3
圖一是第一屏，圖二是第二屏的上半部分，圖三是第二屏的下半部分
第一屏到第二屏需要fullpage滑動的整屏效果，但是第二屏太長，需要普通的滑動效果
解決辦法：在fullpage之前引入iScroll.js，設置fullpage的屬性scrollOverflow：true
$(function(){ $('#fullpage').fullpage({ scrollOverflow: true }); });
只要超出屏幕高度就會出現滾動條，就可以滾動了，滾動條比較丑
去掉滾動條的解決辦法：
$('#fullpage').fullpage({
scrollOverflow: true,
scrollOverflowOptions: {
scrollY: false
}
});
在fullpage的配置中加上
scrollOverflowOptions: {
scrollY: false
}
注意：如果有同學發現scrollOverflow: true，能正確顯示，但是有滾動條，但是加了scrollOverflowOptions: {scrollY: false}，滾動條不見了，但是無法正確顯示，如果出現這個問題，請大家去掉scrollOverflowOptions: {scrollY: false}，並把iScroll.js的1012,1013行注釋掉，就可以正確實現
這里附上最簡單的示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="./build/jquery.min.js"></script>
<script src="./build/scrolloverflow.min.js"></script>
<script src="./build/jquery.fullpage.js"></script>
<title>Document</title>
</head>
<body >
<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">aaa</div>
<div class="section test">
<div style="background-color:#ccc;height:400px">ssss</div>
<div style="background-color:#eee;height:400px">ssss</div>
<div style="background-color:#bbb;height:400px">ssss</div>
<div style="background-color:#aaa;height:400px">ssss</div>
</div>
</div>
<script>
$(function(){
$('#fullpage').fullpage({
css3: true,
scrollOverflow: true,
scrollOverflowOptions: {
scrollY: false
}
});
});
</script>
</body>
</html>
2.手機端獲取屏幕高度不正確
如上圖所示，我手機的高度為337，但是代碼中一屏的高度確為1743，在某種情況下會影響我們的頁面布局
解決辦法為：<meta name="viewport" content="width=device-width">
注意：我的fullpage.js的版本是2.8.1，iScroll.js的版本是5.2.0，我了解過有些低版本和我這樣寫是有問題的
最后
iScroll.js下載及說明地址：https://github.com/cubiq/iscroll
fullpage.js下載及說明地址：https://github.com/lihjian/jQueryfullPage.js