简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

全画面スクロールプラグインfullpage.jsの使い方を詳しく解説

php中世界最好的语言
リリース： 2018-03-14 17:53:22
オリジナル
3983 人が閲覧しました

今回は全画面スクロールプラグインfullpage.jsの使い方について詳しく解説していきます。 フルスクリーンスクロールプラグインfullpage.jsを使用する際の注意点は何ですか？ 、見てみましょう。

過去 2 日間で、同社の Web サイトはスクロール プラグイン fullpage.js を使用して改訂されました。ページのコンテンツは問題なく画面全体にスクロールできます。さまざまな設定に関するドキュメントもオンラインにあります。
私が遭遇した問題は、ページのコンテンツが画面に収まらない場合、上のコンテンツと一緒に配置すると混みすぎ、画面上に単独で配置するとスペースが空きすぎることです

。

一番下のフッター部分は単体で見てみたいものですが、ネットで色々調べてまとめたので今後の参考に記事に書くのが個人的には一番簡単だと思います。 

  <!--footer及倒数第二屏的HTML-->
  <body data-spy="scroll">
   <p id="dowebok" class="container-fluid">
    <p class="section" id="nextS">
      <p class="sect ">
          <p class="sectcenter4"></p>
      </p>
      <p class="sect sectbg2">
        <p class="container">
          <p class="sectcenter5"></p>
        </p>
      </p>
    </p>
    <p class="section footerss"><footer class="footer" id="footer"></footer></p>
   </p>
  </body>
ログイン後にコピー
rree

これを書くと以下のようになります。フッター全体が1画面を占め、中央に縦に表示されます。

達成したい効果に応じて、フッターを#nextS画面に近づける（垂直方向の中央ではない）+#nextS画面に到達したときのスクロール距離は1画面ではありません(フッターの高さでなければなりません)。
全体の考え方に従って、まず css

    //初始化滚屏的一些内容，最重要的是设置好锚点，这里重点是最后一屏（footer）的锚点footerl
    $('#dowebok').fullpage({
      verticalCentered: false,
      resize: true,
      navigation: true,
      anchors: ['section-1', 'section-2', 'lastScreen','footerl'],
    });
ログイン後にコピー

の問題を解決します。 次に、fullpage.js の問題を修正します。 によって参照される fullpage.js ファイル内の PerformMovement メソッドを見つけて、それを修正します。目的を達成するには、目的の効果 (フッターは前の画面の隣にあり、スクロールの高さはフッターの高さ高さです)

.section.footerss .fp-tableCell{//修改最后一屏display属性
    display: block!important;
  }
//实现footer紧挨着#nextS这一屏显示，底部出现
ログイン後にコピー
このように変更した後は、次のことを心配する必要はありません。最後の画面がいっぱいではないこと。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

同じイベントが繰り返しトリガーされるのを防ぐ方法

画像カルーセル効果を実現する方法

ダイアログ ボックスの時間制限付き非表示を実装する jQuery メソッド

以上が全画面スクロールプラグインfullpage.jsの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript 使用
ソース：php.cn
前の記事：jsのネイティブメソッドの再割り当て 次の記事：jsはcanvasで生成した画像の保存や画像の直接保存を実現します
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1784
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1929
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1641
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1549
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1582
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！