zoukankan      html  css  js  c++  java
  • 整屏纵向切换超出整屏内容纵向滚动 解决办法-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的办法实现以上效果,还请指教。

  • 相关阅读:
    python和搜索
    Flask---ajax(jquery)交互
    Flask--修改默认的static文件夹的方法
    Flask设计带认证token的RESTful API接口[翻译]
    Python 和 Flask实现RESTful services
    等差数列偶数被除2删除后的恢复问题(2018小马智行秋招计算机视觉第三道编程题)
    Leetcode 140 单词拆分II: 字符串s在字典wordDict中有多少种拆分方法。
    LeetCode 139 单词拆分:字符串s能否分割为字符串数组words(wordDict)中字符串的组合?(某未来公司面试题目)
    ROS时间概念总结:ros::Time、ros::Duration、定时器ros::Timer&ros::Rate
    ++i、i++、i+=1、i=i+1的区别
  • 原文地址:https://www.cnblogs.com/winteronlyme/p/7383338.html
Copyright © 2011-2022 走看看