私は優れたを使用していますfullpage.js ライブラリを使用してフルスクリーンサイトを作成しますが、ユーザーが2番目のセクションに到達した後はfullpage.jsのスクロールを無効にし、それ以降は通常どおりスクロールできるようにします。ドキュメントで手がかりを見つけることができないようです。
回答 2 件
このコールバックメソッドを使用してください: 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>
あなたは
scrollOverflow
を使用することができます セクション内の通常のスクロールをシミュレートするオプション。この例をご覧ください。