最近接触了好几次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

fullpage 单屏高度超过屏幕高度，实现单屏内可以滚动并解决手机端单屏高度不正确的问题的更多相关文章

  1. 百度地图手机端单触点单击和长按事件，解决部分手机(小米手机)地图单击事件失效，多触点、拖动依然触发长按的bug

    /** * Author 岳晓 * * 对百度地图的事件扩展,目前扩展了fastclick和longclick, * 解决某些设备click不执行的问题 * 解决长按事件在拖动.多触点依然执行的bug ...

  2. css3 手机端翻屏切换效果

    原理是基于css3的 1.景深:perspective:100px; 2.中心点:transform-origin:center center 0; 3.transform-style:preserv ...

  3. html手机端全屏显示和溢出问题

    <meta name="viewport" content="width=1200, initial-scale=0.3"> initial-sca ...

  4. 解决poshytip 表单高度大于屏幕高端 显示问题

    Poshy Tip是一款非常友好的信息提示工具,它基于jQuery,当鼠标滑向链接时,会出现一个信息提示条.信息的内容直接可以在HTML里设定也可以是从服务端调用的数据,该插件还提供了很多属性和方法. ...

  5. div自身高度、屏幕高度

    获取元素高度 scrollWidth    //显示当前元素的宽度 scrollHeight   //显示当前元素的高度 scrollLeft     //显示当前元素的左边距左侧的距离 scroll ...

  6. jQuery：实现图片按需加载的方法，当要显示内容的高度超过了页面的高度，按需加载，根据滚动条的位置来判断页面显示的内容

    实现图片按需加载的方法,当要显示内容的高度超过了页面的高度,按需加载,根据滚动条的位置来判断页面显示的内容 这个类似于京东或淘宝页面,根绝页面的滚动,显示下面的内容 如下图所示,一开始并不是所有的图片 ...

  7. fullpage中大的图片超过一屏怎么在手机端滑动显示？

    fullpage中大的图片超过一屏怎么在手机端滑动显示?(设置overflow电脑端是会出现滚动条的,但是在手机端不出现滚动条,图片也不可左右滑动显示) var $window = $(window) ...

  8. vivo怎么录屏 手机录制屏幕详细教程

    在手机上我们经常可以刷到许多类似于手机游戏之类的屏幕视频我想肯定会有很多人好奇怎么录制的,今天小编所说的便是教大家如何在安卓手机上进行屏幕录像,下面便是关于vivo怎么录屏的具体操作方法,希望能对你们 ...

  9. 单表行数超过 500 万行或者单表容量超过 2GB，才推荐进行分库分表。

    https://github.com/alibaba/p3c/blob/master/阿里巴巴Java开发手册(详尽版).pdf 单表行数超过 500 万行或者单表容量超过 2GB,才推荐进行分库分表 ...

随机推荐

  1. DI依赖注入/IOC控制反转

    DI依赖注入# 啥都不说,直接上代码 <?php class UserController { private $user; function __construct(UserModel $us ...

  2. swift基础：第一部分：基本数据类型及结构

    首先谈点开心的:今天是周二,广州的天气格外明朗,早上上班的心情也不一样,最值得高兴事,很快到五一劳动节了,说到劳动节,放假是吧.你懂的.再来谈谈我上周的工作总结,上周可以说是黑轮压城城欲摧,甲光向日金 ...

  3. 真~让IE8支持background: rbga; ，IE8下兼容rgba颜色的半透明背景

    IE8下兼容rgba颜色的半透明背景 这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们 ...

  4. 构建简单的Maven工程，使用测试驱动的方式开发项目

    构建简单的Maven工程很简单,这里写这篇随笔的原因是希望自己能记住几个小点. 一.安装Maven 1.下载maven:https://maven.apache.org/download.cgi 2. ...

  5. 用js写的极简的导航菜单，带下拉列表

    太简单了,不多说,但是自己还是写了一会,因为总会出现这样那样小的错误,毕境最近在复习和学习一些前台,欢迎看到的各位能给点改进意见或者其它的,Thank you! 首先是发图,只用CSS写了结构,几乎没 ...

  6. oracle表分区、表分析及oracle数据泵文件导入导出开心版

    1.先说oracle表分区是什么吧,这样吧我们来举个桃子,栗子太小,我们就不举了,我们来举个桃子. 你有500万份文件,你要把他存在磁盘上,好嘛,我们就一个文件夹,500万分文件在那儿杵着,我们想找到 ...

  7. centos7 卸载openJDK 安装jdk7

    [root@cms02 root]# rpm -qa | grep jdk java--openjdk-headless-1.7.0.75-2.5.4.2.el7_0.x86_64 java--ope ...

  8. linux常用的命令

    Linux简介及Ubuntu安装 Linux,免费开源,多用户多任务系统.基于Linux有多个版本的衍生.RedHat.Ubuntu.Debian 安装VMware或VirtualBox虚拟机.具体安 ...

  9. python：模态编程框

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  10. 移动端接口：java写get方式访问数据（springmvc+spring。。。）

    很多时候,一个问题想明白,找对点了再去问,这样被问的人也知道怎么给你讲,你也听的明白. 就比如做移动端接口,上去就问 怎么弄接口呀,其实是没找到主要的点上,所以不知道怎么弄,那个点就是手机接口是干嘛的 ...