为了账号安全,请及时绑定邮箱和手机立即绑定

scrollOverflow不起作用 在第一页就不动了?求助

配置scrollOverflow:true ,段落也加长了,也加了<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> 

scrollOverflow不起作用 在第一页就不动了。用滚动轮不好使,用键盘可以慢吞吞往下滑

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <title>FullPage</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.css"/>
    <style>
        body{color: #ffffff;}
        .section1{background-color: #0e9742;}
        .section2{background-color: #971740;}
        .section3{background-color: #b7dd3f;}
        .section4{background-color: #2b5b97;}
        .slide{text-align: center;}
    </style>
</head>
<body>
    <div id="fullPage">
        <div class="section section1"><h1>这是第一屏</h1></div>
        <div class="section section2">
            <div>slide1</div>
            <div>slide2</div>
            <div>slide3</div>
            <div>slide4</div>
        </div>
        <div class="section section3">
            <h1>这是第三屏</h1>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
            <p>这是一段超级长的段落这是一段超级长的段落</p>
        </div>
        <div class="section section4"><h1>这是第四屏</h1></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#fullPage').fullpage({
                sectionsColor:['#0e9742','#971740','#b7dd3f','#2b5b97'],
                //resize:true,
                //continuousVertical:true,
                //navigation:true,
                //navigationPosition:'right',
                //navigationTooltips:['page1','page2','page3','page4'],
                //showActiveTooltip:true,
                //slidesNavigation:true,
                //slidesNavPosition:'top',
                scrollOverflow:true
            });
        })
    </script>
</body>
</html>

正在回答

2 回答

非常感谢,居然解决了我的问题,哈哈哈哈

0 回复 有任何疑惑可以回复我~

引入的fullPage.js版本不一致,引入"https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"然后slimScroll引入版本为:“https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
FullPage.js全屏滚动插件
  • 参与学习       43827    人
  • 解答问题       202    个

基于jQuery的全屏滚动效果插件,让翻页显得格外的高端大气上档次

进入课程

scrollOverflow不起作用 在第一页就不动了?求助

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信