ブートストラップはスクロール監視を毎日学習する必要がある_JavaScript スキル

この記事では、誰でも学べる Bootstrap のスクロール監視について紹介します。具体的な内容は次のとおりです。

1. 現在、Scrollspy では、アクティブなリンクを適切に強調表示するために Bootstrap ナビゲーション コンポーネントを使用する必要があります。

---- スクロール監視を使用する場合、ナビゲーション バーは class="nav" の nav コンポーネントを使用する必要があります:

以下はソース コードのセクションです。赤でマークされた部分はこれを証明できます。

ScrollSpy を使用する場合は、

タグを使用する必要があり、
• の下に タグが必要です。

  注: さらに、

  タグを別のコンテナ (div など) に配置し、そのコンテナに ID を追加する必要があります。親コンテナのプロパティ (これについてはセクション 4 で説明します)

  function ScrollSpy(element, options) {
    this.$body     = $(document.body)
    this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
    this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)
    this.selector    = (this.options.target || '') + ' .nav li > a'
    this.offsets    = []
    this.targets    = []
    this.activeTarget  = null
    this.scrollHeight  = 0
  
    this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
    this.refresh()
    this.process()
   }
  

  2. Navbar リンクには、解決可能な ID ターゲットが必要です。たとえば、home は、

  のようなものに対応する必要があります。 ;
  .

  --- 簡単に言うと、

  • の下の タグには href="#id" 属性が必要であり、スクロールするコンテンツには対応する このようなタグ。コンテンツが タグまでスクロールすると、対応する
  • が自動的に表示されます。選択されました。

    -- 実際、Web 開発を行った友人はこれを知っています。以前のバージョンの HTML では、アンカー タグは通常 を使用していましたが、HTML5 ではアンカー タグの代わりに使用されなくなりました。 name 属性、id 属性を使用

     ScrollSpy.prototype.activate = function (target) {
      this.activeTarget = target
    
      this.clear()
    
      var selector = this.selector +
       '[data-target="' + target + '"],' +
       this.selector + '[href="' + target + '"]'
    
      var active = $(selector)
       .parents('li')
       .addClass('active')
    
      if (active.parent('.dropdown-menu').length) {
       active = active
        .closest('li.dropdown')
        .addClass('active')
      }
    
      active.trigger('activate.bs.scrollspy')
     }
    

    3. 実装方法に関係なく、scrollspy では、--- 本文のスクロールを監視する場合は、position:relative スタイルを本文に追加する必要があります

    --- 監視されているのが Body ではなく、他の要素である場合 [この方法が一般的であるようです]、次の 3 つのスタイルを追加する必要があります:

    position:relative;height:500px;overflow -y :scroll;

    ScrollSpy.prototype.refresh = function () {
      var that     = this
      var offsetMethod = 'offset'
      var offsetBase  = 0
    
      this.offsets   = []
      this.targets   = []
      this.scrollHeight = this.getScrollHeight()
    
      if (!$.isWindow(this.$scrollElement[0])) {
       offsetMethod = 'position'
       offsetBase  = this.$scrollElement.scrollTop()
      }
    

    4. トップバーのナビゲーションにスクロールスパイ動作を簡単に追加するには、スパイしたい要素に data-spy="scroll" を追加します (最も一般的には )。次に、data-target を追加します。属性には、Bootstrap .navcomponent の親要素の ID またはクラスを指定します。
    --- スクロールコンテンツのラベルに data-spy="scroll" 属性と data-target 属性を追加する必要があります
    data-spy 属性は監視する要素を指定し、data-target 属性はスクロール中に制御する必要があるナビゲーションの強調表示を指定します
    下の初期化ソースコードをもう一度見てください。赤色でマークされた位置、this.options.target の値は、スクロールするコンテンツ要素の data-target の値と同じです。コンポーネントを作成するときは、.nav を別のコンテナ (div など) に配置する必要があり、コンテナには id 属性が必要です (データターゲットと同じ値をここで設定する必要があります)。 ）。

    function ScrollSpy(element, options) {
      this.$body     = $(document.body)
      this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
      this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)
      this.selector    = (this.options.target || '') + ' .nav li > a'
      this.offsets    = []
      this.targets    = []
      this.activeTarget  = null
      this.scrollHeight  = 0
    
      this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
      this.refresh()
      this.process()
     }
    

    5. CSS にposition:relative; を追加した後、JavaScript 経由でスクロールスパイを呼び出します。

    $('yourTag').scrollspy({ target: 'nav-parent-div-id' })
    -- yourTag はスクロール コンテンツを運ぶ要素の ID、nav-parent-div-id は .nav 要素の親要素の ID (つまり、data-target の値) ) めちゃくちゃなことをたくさん書きましたが、ここではいくつかの簡単な手順を要約します:

    1.タグを追加

    2. タグ内に .nav コンポーネントを追加し、li->a

    に href="#tag" 属性を追加します

    3.

    を追加します;

    4. スタイル #content{height:500px;overflow-y:scroll;opsition:relative;}

    を追加します。

    5. スクリプト $('#content').scrollspy({target:'scrollSpyID'});

    を追加します

    最後に、小さな栗:

    <style type="text/css">
        #body {
          position: relative;
          height: 500px;
          overflow-y: scroll;
        }
      </style>
    

    <div id="sc">
        <ul class="nav nav-pills">
          <li class="active">
            <a href="#A">第一段</a>
          </li>
          <li>
            <a href="#B">第二段</a>
          </li>
          <li>
            <a href="#C">第三段</a>
          </li>
        </ul>
    
      </div>
    
    

    <div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">
    
    　　<a id="A">第一段</a><br />
    
    　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->
    
    　　<a id="A">第二段</a><br />
    
    　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->
    
    　　<a id="A">第三段</a><br />
    
    　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->
    
    </div>
    
    

    $(function () {
      $('#body').scrollspy({ target: '#sc' });
    });
    

    以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。
    関連ラベル：

    bootstrap スクロールリスナー

    ソース：php.cn
    前の記事：Fullpage.js 固定ナビゲーション バー - 位置決めナビゲーションの実装 bar_javascript スキル 次の記事：socket.io+express_node.jsをベースにしたマルチルームチャットの実装
    このウェブサイトの声明

    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事

    • NullPointerException とは何ですか?どのように修正すればよいですか?
      2024-10-22 09:46:29
    • 初心者からプログラマーへ: 旅は C の基礎から始まります
      2024-10-13 13:53:41
    • PHP による Web 開発のロックを解除する: 初心者ガイド
      2024-10-12 12:15:51
    • C の謎を解く: 新人プログラマーのための明確でシンプルな道
      2024-10-11 22:47:31
    • コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
      2024-10-11 19:36:51
    • 内なるプログラマーを解き放つ: まったくの初心者のための C
      2024-10-11 15:50:41
    • C で生活を自動化する: 初心者向けのスクリプトとツール
      2024-10-11 15:07:41
    • PHP を簡単に: Web 開発の最初のステップ
      2024-10-11 14:21:21
    • Python で何でも構築: 創造性を解き放つための初心者ガイド
      2024-10-11 12:59:11
    • コーディングの鍵: 初心者のための Python の力を解き放つ
      2024-10-11 12:17:31
    最新の問題

    ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

    から 2024-04-06 21:58:04

    0

    1

    800

    CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...

    から 2024-04-06 20:22:15

    0

    1

    454

    CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...

    から 2024-04-06 12:53:11

    0

    1

    376

    Web ページのサイズを変更するとブートストラップ スイッチが正しく動作しない これはコードです: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"clas...

    から 2024-04-05 08:45:39

    0

    1

    3443

    Laravel のブートストラップ モードで AWS PDF ファイルを表示する https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf のよ...

    から 2024-04-04 22:16:18

    0

    1

    1450
    関連トピック

    詳細>

    • Nvidiaコントロールパネルをダウンロードする方法
    • bootmgr が見つからないため起動できません
    • ブロックチェーンWeb3.0とは
    • 携帯電話のルート
    • PowerDesigner から Word をエクスポートする方法
    • PSブラシの色を変更する方法
    • フレックスチュートリアル
    • Huaweiデュアルシステム間で設定を切り替える方法