ブートタップスクロール監視_html/css_WEB-ITnose-htmlチュートリアル-php.cn

---最初にソースコード付きの公式Webサイトの手順を紹介します

---次にスクロールモニタリングの使用手順をまとめます

---最後に簡単な例を示します

---重要なポイント: 全体が少し散らばっていて乱雑なので、心と目に負担がかかります、笑

--------- ---------------------------------------------------- ------------------------------------

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

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

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

ScrollSpy を使用する場合は、

の下にタグが必要です。 ;。

注: さらに、

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

 1 function ScrollSpy(element, options) { 2     this.$body          = $(document.body) 3     this.$scrollElement = $(element).is(document.body) ? $(window) : $(element) 4     this.options        = $.extend({}, ScrollSpy.DEFAULTS, options) 5     this.selector       = (this.options.target || '') + ' .nav li > a' 6     this.offsets        = [] 7     this.targets        = [] 8     this.activeTarget   = null 9     this.scrollHeight   = 010 11     this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))12     this.refresh()13     this.process()14   }

ログイン後にコピー

2. Navbar リンクには、home のような解決可能な ID ターゲットが必要です。 " > などの対応するタグが必要です。コンテンツがタグまでスクロールすると、対応する

が表示されます。が自動的に選択されます。
-- 実際、Web 開発を行った友人はこれを知っています。以前のバージョンの HTML では、
anchor タグ は通常 メソッドを使用していましたが、HTML5 の anchor タグは
です。 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; を使用する必要があります。以外の要素をスクロールスパイするときは、必ず高さを設定し、overflow-y:scroll; を適用してください。

--- Body のスクロールを監視する場合は、 body を指定する必要があります Position:relative スタイルを追加します

--- 監視対象が Body ではなく、他の要素である場合 [この方法が一般的であるようです]、position:relative;height:500px; の 3 つのスタイルを追加する必要があります。 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" を追加します (最も一般的には、これは
の親要素の ID またはクラスを使用して data-target 属性を追加します。 --- data-spy="scroll" 属性と data-target 属性を追加する必要があります。スクロールするコンテンツのラベル

data -spy 属性は監視対象の要素を指定し、data-target 属性はスクロール中に制御する必要があるナビゲーションの強調表示を指定します
以下の初期化ソースコードをもう一度見てください。赤で表示されている this.options.target の値は、スクロールするコンテンツ要素の data-target の値と同じです。これを見て、.nav コンポーネントを定義するときに .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経由でscrollspyを呼び出します:
```
　　　　$('yourTag').scrollspy({ target: 'nav-parent-div-id' })<br />-- yourTag 就是要承载滚动内容的元素的ID，nav-parent-div-id 就是.nav元素的父元素的id（也就是data-target的值）<br /><br /><br /><strong>乱七八糟写了一堆，下面总结一个简单的几个步骤：</strong><br /><br />
```
ログイン後にコピー
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' });});
ログイン後にコピー
関連ラベル：
bootstap 滚动监听

ソース：php.cn

前の記事：(1) CSSコードの蓄積～忘れがちだけど思い出せないコード_html/css_WEB-ITnose 次の記事：CSS のpositioning_html/css_WEB-ITnose で詳しく学ぶ必要がある一般的なテクニック

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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
最新の問題

スクロールイベントリスナーが要素に追加されましたが、scrollTop が 0 に等しくない場合にのみ正しく移動しますそこで、完了済みタスクとアクティブなタスクという 2 つのリストがあるこの小さなスクリプトを作成しました。ボタンをクリックするとタスクリストを切り替えることができ、[詳細情報] ...

から 2024-04-01 11:03:26

0

1

326

Typescript で EventListener を削除できません TypeScriptでイベントリスナーを削除しようとしています。 if文にイベントリスナーを追加します。 else ステートメントでは、これらのイベントリスナーを削除しようとして...

から 2024-03-30 18:07:42

0

1

295
関連トピック
詳細>

ブートタップ スクロール監視_html/css_WEB-ITnose

ブートタップスクロール監視_html/css_WEB-ITnose