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的办法实现以上效果,还请指教。

  • 相关阅读:
    初涉Android蓝牙开发
    android真机调试方法
    BizTalk Server 系列文章目录
    【译文】ExtJS 4.1性能预览
    【译】ExtJS 4.1会带来什么
    cocos2dx 如何使用Visual Studio 2010和xcode 4混合编写手机游戏
    Mac osx 下让android 模拟器横屏
    c++ int convert to std::string 转换成std::string
    离ExtJS 4.1 beta发布只剩26个bug了
    Window.ShowModalDialog使用详解
  • 原文地址:https://www.cnblogs.com/winteronlyme/p/7383338.html
Copyright © 2011-2022 走看看