ブートストラップソースコード分析Scrollspy（スクロールリスニング）
ソースコードファイル：
scrollspy.js
関数を実装します
1.スクロール領域に設定されたハッシュキーが有効な位置に到達すると、ナビゲーションの指定されたアイテムが関連付けられています。
2.ナビゲーションは.nav> li>構造でなければならず、HREFまたはデータターゲットのハッシュキーはハッシュキーにバインドする必要があります
3.メニューには.navスタイルが必要です
4.スクロール領域のデータターゲットは、ナビゲーションの親IDと一致する必要があります（親である必要があります）
<div id = "selector"> <ul> <li> <a href = "＃one"> one </a> </li> <li> <a href = "＃two"> 2 </a> </li> <li> <a href = "オーバーフロー：隠された;オーバーフロー-Y：auto; " > <h4 id = "one"> ibe </h4> <p> 1つの特定のコンテンツ<br/> 1つの特定のコンテンツ<br/> 1つの特定のコンテンツ<br/> 1つの特定のコンテンツ<br/> </p> <h4 id = 2つの特定のコンテンツ</h4> <p> 1つの特定のコンテンツ<br/>特定のコンテンツ<br/>コンテンツ<br/> </p> <h4 id = "3"> 3 </h4> <p> 1つの特定のコンテンツ<br/> 1つの特定のコンテンツ<br/> </p> <h4 id = "3 </h4> <p> 1つの特定のコンテンツ<br/> 1つの特定のコンテンツ<br/> 1つの特定のコンテンツ<br/> </p>
ソースコード分析：
1。原則：スクロールコンテナ内のハッシュキー位置が、コンテナの上部にオフセットされて設定された値のみである場合、ナビゲーションで対応するHREFが設定されます。
2。スクロール領域が本体の場合、スクロール領域要素はウィンドウとしてマークされます（コンストラクターで審査されます）
これ$（window）：$（element）
3。GetScrolheight：スクロールコンテナのコンテンツの高さを取得します（隠された部分を含む）
これ。$ screollelement [0] .scrollheight || math.max（this。$ body [0] .scrollheight、document.documentelement.scrollheight）
4。更新：各ハッシュキーの値をスクロールコンテナに更新して保存します
4.1。オフセットを使用して、デフォルトでポジショニング値を取得します。スクロール領域がウィンドウでない場合は、ポジションを使用して取得します。
if（！$。ISWINDOW（this。$ screollElement [0]））{offsetMethod = 'position' offsetbase = this。$ screollement.scrolltop（）//スクロール領域にスクロール計算に参加しないコンテンツがある場合、ベース高さを取得}4.2。ナビゲーション上のハッシュキーによると、トラバーサルとスクロール領域のハッシュキーに対応するオフセット値を取得します。
This。$ body .find（this.selector）.map（function（）{var $ el = $（this）var href = $ el.data（ 'target'）|| $ el.attr（ 'href'）var $ href = /^#./.test（href）&& $（href）// $ href.length && $ href.is（ '：visible'）&& [$ href [offsetmethod]（）。top + offsetbase、href]] || that.targets.push（this [1]）}）5.プロセス： Scrollbarイベントトリガー関数は、現在強調表示する必要があるナビゲーションメニューを計算するために使用されます
5.1。スクロールコンテナのスクロール距離を取得します。
var scrolltop = this。$ screolllement.scrolltop（） + this.options.offset
5.2。ローリング容器が転がることができる最大高さ
//最大スクロール可能な高さ=スクロール設定距離（オフセット） +スクロールコンテナコンテンツの高さ - スクロールコンテナ設定高さvar maxscroll = this.options.offset + scrollheight -this。$ scrollelement.height（）
5.3。スクロール要素ロジックを設定します：
for（i = offsets.length; i-;）{//すべてのオフセットactiveTarget！=ターゲットを転送[i] //現在のターゲットがActiveTarget && scrolltop> = offsets [i] // scroll height> offset &&（offsets [i + 1] === redined || scrolltop <offs <offs offs wosh off spection> | I+1要素は、スクロールの高さよりも大きくありません&& this.activate（ターゲット[i]）// iを現在のアクティブアイテムとして設定}6。アクティブ：指定されたナビゲーションメニューを強調表示するように設定します
7。クリア：すべての強調表示されたメニューをクリアします
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。