整屏纵向切换超出整屏内容纵向滚动 解决办法-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的办法实现以上效果,还请指教。
整屏纵向切换超出整屏内容纵向滚动 解决办法-fullpage的更多相关文章
- ScrollView嵌套ListView显示不完全、嵌套TextView不能滚动解决办法
目录: 一.情景说明 二.最初做法 三.解决办法 一.情景说明 1.情景 最近项目刚好有一个需求,需要在一个界面中用ScrollView嵌套一个滚动的TextView和一个listView ...
- iOS - UITableView中Cell重用机制导致Cell内容出错的解决办法
"UITableView" iOS开发中重量级的控件之一;在日常开发中我们大多数会选择自定Cell来满足自己开发中的需求, 但是有些时候Cell也是可以不自定义的(比如某一个简单的 ...
- Altium Designer之AD16在Win10系统下无法切换走线/布线模式的解决办法
有些童鞋会在Win10下使用AD16的时候发现,走线模式/布线模式(切换直角,45°,弧形等)不能切换. 问题出在输入法上,一般是切换到英文输入法即可解决,但是有一种情况是win10系统自带输入法有时 ...
- 关于el-select 单选与多选切换的时候报错的解决办法
错误: 出错原因: 估计是单选切换到多选的时候元素没有刷新的原因,猜测 解决办法: 1.在el-select上面加上一个条件判断, 条件判断中绑定一个变量值 例如 :multiple="is ...
- 织梦M手机端/自适应网站内容图片变形解决办法
我们在做响应式网站或者织梦M功能手机站的时候,会发现如果内容页图片太大,在移动端显示会变形,dede手机端图片过长等问题,手机端文章内容页图片不能自适应!这给通过手机端浏览网站的用户造成了很不好的用户 ...
- swiper 内容超出纵向滚动 解决办法
.swiper-slide { overflow: auto; } var swiper = new Swiper('.swiper-container', { direction: 'verti ...
- 三星笔记本R428安装xp win7双系统,切换系统重启才能进入系统解决办法。
三星笔记本 XP win7 双系统切换重启解决方法 三星笔记本有个奇怪的现象,就是装有XP和win7双系统 xp切换到win7.进系统是会重启一次,并且bios回复光驱为第一启动项,win7切换 ...
- 使用jsp内置对象request获取表单提交中文内容乱码的解决办法
page1.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pag ...
- zabbix邮件内容乱码与邮件内容为附件解决办法
在zabbix的实际使用过程中,在收到邮件预警的时候,我们会发现邮件内容是乱码的,在手机端收到的是附件,而且附件下载后的文件类型是打不开的.这样我们不知道我们是哪个服务器的哪项服务出了问题,接下来我们 ...
随机推荐
- win7 安装 IIS 配置ASP 【原创】
1.安装https://jingyan.baidu.com/article/5553fa8215f7ef65a2393413.html2.测试localhost 打开测试没问题3.配置网站--添加站 ...
- Greenwich.SR2版本的Spring Cloud Zuul实例
网关作为对外服务,在微服务架构中是一个很重要的组件,主要体现在动态路由和接入鉴权这两个功能上.现在我们通过Spring Cloud Zuul来实现对之前a-feign-client(参见Greenwi ...
- CentOS 7部署 Ceph分布式存储架构
一.概述 随着OpenStack日渐成为开源云计算的标准软件栈,Ceph也已经成为OpenStack的首选后端存储.Ceph是一种为优秀的性能.可靠性和可扩展性而设计的统一的.分布式文件系统. cep ...
- 123457123457#0#-----com.yuming.TruckCarRun01--前拼后广--大卡车游戏cym
com.yuming.TruckCarRun01--前拼后广--大卡车游戏cym
- (一)java面试易忘题目精选(1)
1. int和Integer有什么区别? 答:Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入了基本数据类型,但是为了能够将这些基本数据类型当成对象操作,Java为每一个基本数据类 ...
- svn如何撤销之前某个版本所做的改变
撤销这个版本所做的修改:(撤销这个版本所做的修改) 右键项目svn->show log->revert changes from this revision 如果要恢复到某个版本:(这个版 ...
- iOS-UILabel的使用
常用属性UILabel //显示的文字 @property(nonatomic,copy) NSString *text; //字体 @property(nonatomic, ...
- centos(6,7) 系统常用命令
目录: 系统服务命令 文件操作 系统信息 文件和目录 文件搜索 挂载一个文件系统 磁盘空间 用户和群组 文件的权限 压缩与解压缩 YUM丶RPM 包 查看文件内容 文本处理 文件系统分析 初始化一个文 ...
- React native 禁止手势触摸 pointerEvents
碰到一个需求是做个轮播图带自动播放的,UED那边给轮播的底部加了阴影渐变,如下红色区域. 这样会导致一个问题,手触摸在红色区域会被这层View挡住,导致不能手动滑动切换. 原先采取过的方法是在对应的触 ...
- poj2185(kmp算法next数组求最小循环节,思维)
题目链接:https://vjudge.net/problem/POJ-2185 题意:给定由大写字母组成的r×c矩阵,求最小子矩阵使得该子矩阵能组成这个大矩阵,但并不要求小矩阵刚好组成大矩阵,即边界 ...