这个问题我也是研究了好久，百度了很多办法，swiper我始终没有找到合适的解决办法，所以我放弃了swiper，改用fullpage。

fullpage里面有个scrollOverflow的属性：

并且还需要引入iscroll.js。详细代码如下：

  1. <!DOCTYPE html>
  2. <html data-dpr="1">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.     <meta name="viewport" id="viewport"
  7.           content="target-densitydpi=1,width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1"/>
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <meta name="format-detection" content="telephone=no">
  10.     <meta content="yes" name="apple-mobile-web-app-capable"/>
  11.     <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
  12.     <title>Title</title>
  13.     <script src="../js/jquery.js"></script>
  14.     <script src="iscroll.js"></script>
  15.     <link rel="stylesheet" href="jquery.fullPage.css">
  16.     <script src="jquery.fullPage.js"></script>
  17.     <style>
  18.  
  19.         /* Style for our header texts
  20.         * --------------------------------------- */
  21.         h1 {
  22.             font-size: 5em;
  23.             font-family: arial, helvetica;
  24.             color: #fff;
  25.             margin: 0;
  26.             padding: 40px 0 0 0;
  27.         }
  28.  
  29.         .intro p {
  30.             color: #fff;
  31.             padding: 40px 0 0 0;
  32.         }
  33.  
  34.         /* Centered texts in each section
  35.         * --------------------------------------- */
  36.         .section {
  37.             text-align: center;
  38.         }
  39.  
  40.         /* Bottom menu
  41.         * --------------------------------------- */
  42.         #infoMenu li a {
  43.             color: #fff;
  44.         }
  45.     </style>
  46.  
  47. </head>
  48. <body>
  49. <div id="fullpage">
  50.     <div class="section " id="section0">
  51.         <div class="intro">
  52.             <h1>Scrolling inside sections</h1>
  53.             <p>Easy and useful! Just make use of the option `scrollOverflow` for it and add the `scrolloverflow` vendor
  54.                 libary! <br></p>
  55.  
  56.             <img src="iphone2.png" alt="iphone" id="iphone-two"/>
  57.  
  58.             <p>Eu nec ferri molestie consequat, vel at alia dolore putant. Labore philosophia ut vix. In vis nostrud
  59.                 interesset appellantur, vis et tation feugiat scripserit. Te nec noster suavitate persecuti. Diceret
  60.                 erroribus cu vix, alii omnes ei sit. Sea an corrumpit patrioque, virtute accumsan nominavi et usu, ex
  61.                 mei dolore vocibus incorrupte.
  62.  
  63.                 Duo ea saperet tacimates. Sed possim prodesset no, per novum putent doctus ea. Eu mea magna aliquip
  64.                 graecis, pri corpora officiis complectitur ei, lorem saepe consetetur his ad. Meis consulatu ei vis, an
  65.                 altera ocurreret interesset qui.
  66.  
  67.                 Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt
  68.                 malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an, no
  69.                 has epicuri verterem. Nam at animal pertinax efficiantur.
  70.  
  71.                 Per alienum torquatos eu. Sed saepe quodsi et, ullum choro definitionem sed et. Ullum elitr comprehensam
  72.                 sed at, sint illum propriae per eu. Eu enim laudem reformidans vel. Pro clita quando ad. Usu te virtute
  73.                 quaestio, ut eruditi tacimates volutpat per.
  74.  
  75.                 Affert accusamus duo ex, ea pri habeo graece, cu magna dolorum sea. Quas dictas assueverit ad qui, cu
  76.                 duo harum fabulas apeirian, ullum gubergren et sit. Ne cetero recusabo adipiscing quo, cu harum quaestio
  77.                 neglegentur cum. Has tation aliquip ad, virtute volumus definitionem mel ne. Nobis audiam civibus ius
  78.                 at.
  79.  
  80.                 Ei eum hinc mutat inciderint. Cu maluisset assentior per, graecis ponderum no mel. Eum eu vitae quando
  81.                 gloriatur, cum graece percipitur no, sed errem maiestatis te. Sed porro epicuri te, ad nam malorum
  82.                 verterem. Ea zril aliquip euismod sed.
  83.  
  84.             </p>
  85.         </div>
  86.     </div>
  87.     <div class="section" id="section1">
  88.  
  89.         <div class="intro">
  90.             <h1>Also in sections</h1>
  91.             <img src="iphone-two.png" alt="iphone" id="iphone-two"/>
  92.             <p>
  93.                 Eu nec ferri molestie consequat, vel at alia dolore putant. Labore philosophia ut vix. In vis
  94.                 nostrud interesset appellantur, vis et tation feugiat scripserit. Te nec noster suavitate persecuti.
  95.                 Diceret erroribus cu vix, alii omnes ei sit. Sea an corrumpit patrioque, virtute accumsan nominavi
  96.                 et usu, ex mei dolore vocibus incorrupte.
  97.  
  98.                 Duo ea saperet tacimates. Sed possim prodesset no, per novum putent doctus ea. Eu mea magna aliquip
  99.                 graecis, pri corpora officiis complectitur ei, lorem saepe consetetur his ad. Meis consulatu ei vis,
  100.                 an altera ocurreret interesset qui.
  101.  
  102.                 Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt
  103.                 malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an,
  104.                 no has epicuri verterem. Nam at animal pertinax efficiantur.
  105.                 Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt
  106.                 malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an,
  107.                 no has epicuri verterem. Nam at animal pertinax efficiantur.
  108.                 Eu ponderum comprehensam his, case antiopam pri te. Mel ne partem consequat instructior. Ad dicunt
  109.                 malorum sea, ex qui omnes invenire gubergren. Ius cu autem aliquando, pri vide ornatus perpetua an,
  110.                 no has epicuri verterem. Nam at animal pertinax efficiantur.
  111.  
  112.                 Per alienum torquatos eu.
  113.             </p>
  114.         </div>
  115.  
  116.     </div>
  117.     <div class="section" id="section2">
  118.         <div class="intro">
  119.             <h1>No limitations!</h1>
  120.             <p>Content is a priority. Even if it is so large :)</p>
  121.         </div>
  122.     </div>
  123. </div>
  124.  
  125. <script>
  126.     $(document).ready(function () {
  127.         $('#fullpage').fullpage({
  128.             anchors: ['firstPage', 'secondPage', 'thirdPage'],
  129.             sectionsColor: ['#4A6FB1', '#939FAA', '#323539'],
  130.             scrollOverflow: true
  131.         });
  132.     });
  133.  
  134. </script>
  135. </body>
  136. </html>

如果哪位兄弟姐妹了解swiper的办法实现以上效果，还请指教。

整屏纵向切换超出整屏内容纵向滚动 解决办法-fullpage的更多相关文章

  1. ScrollView嵌套ListView显示不完全、嵌套TextView不能滚动解决办法

    目录: 一.情景说明 二.最初做法 三.解决办法 一.情景说明 1.情景       最近项目刚好有一个需求,需要在一个界面中用ScrollView嵌套一个滚动的TextView和一个listView ...

  2. iOS - UITableView中Cell重用机制导致Cell内容出错的解决办法

    "UITableView" iOS开发中重量级的控件之一;在日常开发中我们大多数会选择自定Cell来满足自己开发中的需求, 但是有些时候Cell也是可以不自定义的(比如某一个简单的 ...

  3. Altium Designer之AD16在Win10系统下无法切换走线/布线模式的解决办法

    有些童鞋会在Win10下使用AD16的时候发现,走线模式/布线模式(切换直角,45°,弧形等)不能切换. 问题出在输入法上,一般是切换到英文输入法即可解决,但是有一种情况是win10系统自带输入法有时 ...

  4. 关于el-select 单选与多选切换的时候报错的解决办法

    错误: 出错原因: 估计是单选切换到多选的时候元素没有刷新的原因,猜测 解决办法: 1.在el-select上面加上一个条件判断, 条件判断中绑定一个变量值 例如 :multiple="is ...

  5. 织梦M手机端/自适应网站内容图片变形解决办法

    我们在做响应式网站或者织梦M功能手机站的时候,会发现如果内容页图片太大,在移动端显示会变形,dede手机端图片过长等问题,手机端文章内容页图片不能自适应!这给通过手机端浏览网站的用户造成了很不好的用户 ...

  6. swiper 内容超出纵向滚动 解决办法

    .swiper-slide { overflow: auto; }   var swiper = new Swiper('.swiper-container', { direction: 'verti ...

  7. 三星笔记本R428安装xp win7双系统，切换系统重启才能进入系统解决办法。

    三星笔记本 XP win7 双系统切换重启解决方法 三星笔记本有个奇怪的现象,就是装有XP和win7双系统    xp切换到win7.进系统是会重启一次,并且bios回复光驱为第一启动项,win7切换 ...

  8. 使用jsp内置对象request获取表单提交中文内容乱码的解决办法

    page1.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pag ...

  9. zabbix邮件内容乱码与邮件内容为附件解决办法

    在zabbix的实际使用过程中,在收到邮件预警的时候,我们会发现邮件内容是乱码的,在手机端收到的是附件,而且附件下载后的文件类型是打不开的.这样我们不知道我们是哪个服务器的哪项服务出了问题,接下来我们 ...

随机推荐

  1. 24Flutter中常见的表单有TextField单行文本框，TextField多行文本框、CheckBox、Radio、Switch

    一.Flutter常用表单介绍: CheckboxListTile.RadioListTile.SwitchListTile.Slide. 二.TextField:表单常见属性: maxLines:设 ...

  2. React vs. Angular vs. Vue

    原文连接 历史 React是一个用于构建Web应用程序UI组件的JavaScript库. React由Facebook维护,许多领先的科技品牌在其开发环境中使用React. React被Faceboo ...

  3. Python - Django - 使用 Bootstrap 样式修改书籍列表

    展示书籍列表: 首先修改原先的 book_list.html 的代码: <!DOCTYPE html> <!-- saved from url=(0042)https://v3.bo ...

  4. 项目中学习ReactiveCocoa的使用方法

    一.注册控制器 控制器上的一个属性 @property (weak, nonatomic) IBOutlet UIBarButtonItem *signInBtn; 在 viewDidLoad 方法中 ...

  5. 【Leetcode_easy】1089. Duplicate Zeros

    problem 1089. Duplicate Zeros 题意: solution: 其中关于虚拟新数组的下标的计算还是有点迷糊... class Solution { public: void d ...

  6. 【Leetcode_easy】645. Set Mismatch

    problem 645. Set Mismatch 题意: solution1: 统计每个数字出现的次数了,然后再遍历次数数组,如果某个数字出现了两次就是重复数,如果出现了0次,就是缺失数. 注意:如 ...

  7. AOP实践—ASP.NET MVC5 使用Filter过滤Action参数防止sql注入，让你代码安全简洁

    在开发程序的过程中,稍微不注意就会隐含有sql注入的危险.今天我就来说下,ASP.NET mvc 5使用Filter过滤Action参数防止sql注入,让你代码安全简洁.不用每下地方对参数的值都进行检 ...

  8. ASP.NET请求过程-Module

    管道模型     上图中为Http请求在Asp.net程序中处理的过程.管道处理模型来自上面的HttpApplication,管道处理模型其实就是多个Module(其实这些module都是在往http ...

  9. Sql server 中count() 与 sum() 的区别

    一句话概括就是Sum(列) 是求和,把所有列的值进行汇总求和:COUNT(列) 是行数汇总,只要列的值不为Null,就会增加1: 举个例子说明下: --创建临时表结构 CREATE TABLE Tem ...

  10. Linux下使用Vim粘贴文本错乱问题解决

    在使用vim进行文档操作时,经常需要进行复制粘贴,在粘贴大量代码时,出现行错位等各种错乱,查找问题解决办法: vim进入文件后,先ESC 在出入 :set paste  回车后再按下 i  之后进行粘 ...