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

最新推荐文章于 2024-04-24 09:22:16 发布

weixin_30421809

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量1k

点赞数 1

文章标签： javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/mianbaodaxia/p/6124627.html

版权

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

转载于:https://www.cnblogs.com/mianbaodaxia/p/6124627.html

weixin_30421809

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
fullpage 单屏高度超过屏幕高度，实现单屏内可以滚动并解决手机端单屏高度不正确的问题...

最近接触了好几次jquery.fullpage.js这个插件，实现整屏的滑动，效果很炫，用fullpage来实现也很简单，但是也碰到了一些问题和大家分享一下1.单屏高度超过屏幕高度，实现单屏的滑动现在客户用一个需求是这样的图一 ...
复制链接

扫一扫