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

  • 相关阅读:
    C++防止头文件反复包括
    yppasswd, ypchfn, ypchsh
    yes
    Yacc
    xxd
    xpdf -Portable Document Format(PDF)文件阅读器
    xinetd
    xargs
    x25, PF_X25
    write -在一个文件描述符上执行写操作
  • 原文地址:https://www.cnblogs.com/winteronlyme/p/7383338.html
Copyright © 2020-2023  润新知