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

  • 相关阅读:
    JS实现右侧悬浮框随着页面的上下轮动而移动
    js实现一个简单的时钟表
    js实现前后端分离点击新闻列表跳转到相应的详情页
    获取当前时间的年、月、日
    点击获取今天时间、明天时间、本周时间、本月时间
    判断是不是ie7浏览器,把https换成http(兼容ie7)
    jq控制class相同点击隐藏当前相同的父元素
    js、jq控制class相同当子元素为空时,父元素隐藏
    photoshop
    不得不说一下vite
  • 原文地址:https://www.cnblogs.com/winteronlyme/p/7383338.html
Copyright © 2011-2022 走看看