bugfix> fullpage.js > 投稿

私は優れたを使用していますfullpage.js ライブラリを使用してフルスクリーンサイトを作成しますが、ユーザーが2番目のセクションに到達した後はfullpage.jsのスクロールを無効にし、それ以降は通常どおりスクロールできるようにします。ドキュメントで手がかりを見つけることができないようです。

回答 2 件
  • あなたは scrollOverflow を使用することができます  セクション内の通常のスクロールをシミュレートするオプション。

    この例をご覧ください。

  • このコールバックメソッドを使用してください: afterLoad(起点、目的地、方向)

    afterLoad: function (origin, destination, direction) {
        var loadedSection = this;
        if (destination == 2) {
            alert("receive to Section 2");
        }
    }
    
    


    コードスニペットの例:

    $(document).ready(function () {
            $('#fullpage').fullpage({
                scrollingSpeed: 300,
                sectionsColor: ['red', 'green', 'blue'],
                afterLoad: function (origin, destination, direction) {
                    var loadedSection = this;
                    if (destination == 2) {
                        alert("receive to Section 2");
                    }
                }
            });
        });
    
    
    .section {
                text-align: center;
                font-size: 36px;
                color: #fff;
            }
    
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.js"></script>
    <div id="fullpage">
            <div class="section">section 1</div>
            <div class="section">section 2</div>
            <div class="section">section 3</div>
    </div>
    
    

あなたの答え