整屏纵向切换超出整屏内容纵向滚动 解决办法-fullpage
这个问题我也是研究了好久，百度了很多办法，swiper我始终没有找到合适的解决办法，所以我放弃了swiper，改用fullpage。
fullpage里面有个scrollOverflow的属性：
并且还需要引入iscroll.js。详细代码如下：
<!DOCTYPE html>
<html data-dpr="1">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" id="viewport"
content="target-densitydpi=1,width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<title>Title</title>
<script src="../js/jquery.js"></script>
<script src="iscroll.js"></script>
<link rel="stylesheet" href="jquery.fullPage.css">
<script src="jquery.fullPage.js"></script>
<style>
/* Style for our header texts
* --------------------------------------- */
h1 {
font-size: 5em;
font-family: arial, helvetica;
color: #fff;
margin: 0;
padding: 40px 0 0 0;
}
.intro p {
color: #fff;
padding: 40px 0 0 0;
}
/* Centered texts in each section
* --------------------------------------- */
.section {
text-align: center;
}
/* Bottom menu
* --------------------------------------- */
#infoMenu li a {
color: #fff;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section " id="section0">
<div class="intro">
<h1>Scrolling inside sections</h1>
<p>Easy and useful! Just make use of the option `scrollOverflow` for it and add the `scrolloverflow` vendor
libary! <br></p>
<img src="iphone2.png" alt="iphone" id="iphone-two"/>
<p>Eu nec ferri molestie consequat, vel at alia dolore putant. Labore philosophia ut vix. In vis nostrud
interesset appellantur, vis et tation feugiat scripserit. Te nec noster suavitate persecuti. Diceret
erroribus cu vix, alii omnes ei sit. Sea an corrumpit patrioque, virtute accumsan nominavi et usu, ex
mei dolore vocibus incorrupte.
Duo ea saperet tacimates. Sed possim prodesset no, per novum putent doctus ea. Eu mea magna aliquip
graecis, pri corpora officiis complectitur ei, lorem saepe consetetur his ad. Meis consulatu ei vis, an
altera ocurreret interesset qui.
Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt
malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an, no
has epicuri verterem. Nam at animal pertinax efficiantur.
Per alienum torquatos eu. Sed saepe quodsi et, ullum choro definitionem sed et. Ullum elitr comprehensam
sed at, sint illum propriae per eu. Eu enim laudem reformidans vel. Pro clita quando ad. Usu te virtute
quaestio, ut eruditi tacimates volutpat per.
Affert accusamus duo ex, ea pri habeo graece, cu magna dolorum sea. Quas dictas assueverit ad qui, cu
duo harum fabulas apeirian, ullum gubergren et sit. Ne cetero recusabo adipiscing quo, cu harum quaestio
neglegentur cum. Has tation aliquip ad, virtute volumus definitionem mel ne. Nobis audiam civibus ius
at.
Ei eum hinc mutat inciderint. Cu maluisset assentior per, graecis ponderum no mel. Eum eu vitae quando
gloriatur, cum graece percipitur no, sed errem maiestatis te. Sed porro epicuri te, ad nam malorum
verterem. Ea zril aliquip euismod sed.
</p>
</div>
</div>
<div class="section" id="section1">
<div class="intro">
<h1>Also in sections</h1>
<img src="iphone-two.png" alt="iphone" id="iphone-two"/>
<p>
Eu nec ferri molestie consequat, vel at alia dolore putant. Labore philosophia ut vix. In vis
nostrud interesset appellantur, vis et tation feugiat scripserit. Te nec noster suavitate persecuti.
Diceret erroribus cu vix, alii omnes ei sit. Sea an corrumpit patrioque, virtute accumsan nominavi
et usu, ex mei dolore vocibus incorrupte.
Duo ea saperet tacimates. Sed possim prodesset no, per novum putent doctus ea. Eu mea magna aliquip
graecis, pri corpora officiis complectitur ei, lorem saepe consetetur his ad. Meis consulatu ei vis,
an altera ocurreret interesset qui.
Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt
malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an,
no has epicuri verterem. Nam at animal pertinax efficiantur.
Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt
malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an,
no has epicuri verterem. Nam at animal pertinax efficiantur.
Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt
malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an,
no has epicuri verterem. Nam at animal pertinax efficiantur.
Per alienum torquatos eu.
</p>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage'],
sectionsColor: ['#4A6FB1', '#939FAA', '#323539'],
scrollOverflow: true
});
});
</script>
</body>
</html>
如果哪位兄弟姐妹了解swiper的办法实现以上效果，还请指教。
