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

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

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

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

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

ScrollSpy を使用する場合は、73a72cdc17fc2b29bb35d64b4687fa7c タグを使用する必要があり、25edfb22a4f469ecb59f1190150159c6 の下に 3499910bf9dac5ae3c52d5ede7383485 タグが必要です。

注: さらに、73a72cdc17fc2b29bb35d64b4687fa7c タグを別のコンテナ (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 ターゲットが必要です。たとえば、bdbe26872a334f3b7c83b8ae7c50ac47home5db79b134e9f6b82c0b36e0489ee08ed は、5f3b34213db5dea3192e3beea655c52f のようなものに対応する必要があります。 ;16b28748ea4df4d9c2150843fecfba68.

--- 簡単に言うと、25edfb22a4f469ecb59f1190150159c6 の下の 3499910bf9dac5ae3c52d5ede7383485 タグには href="#id" 属性が必要であり、スクロールするコンテンツには対応する 8cb07dc87fb7093ec19277969ea4f0e35db79b134e9f6b82c0b36e0489ee08ed このようなタグ。コンテンツが 5ffad543fdd9d71340ebb3c2c670dbf3 タグまでスクロールすると、対応する 25edfb22a4f469ecb59f1190150159c62dac5b3c1a71acb02bf03dd588b09a33 が自動的に表示されます。選択されました。

-- 実際、Web 開発を行った友人はこれを知っています。以前のバージョンの HTML では、アンカー タグは通常 bc8f08fb0993388c993dc7bf88c0ef43 を使用していましたが、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 では、2cfe8e734c24f24dd281d281f3422a34)。次に、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.タグを追加f1518adc5c8cfeb5a647655054a938eba

に 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' });
});

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

声明：

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