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

この記事では、誰でも学べる 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) &#63; $(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
関連トピック
詳細>