Bootstrap -Quellcode -Analyse Scrollespy (Scroll -Hören)
Quellcode -Datei:
Scrollspy.js
Funktionen implementieren
1. Wenn der Hashkey, der im Bildlaufbereich eingestellt ist, die gültige Position erreicht, ist der angegebene Element in seiner Navigation in Association festgelegt.
2. Die Navigation muss .Nav> li> eine Struktur sein, und der Hashkey auf einem HREF oder Daten-Target muss an den Hashkey gebunden sein
3.. Es muss im Menü stil
4. Das Daten-Ziel im Bildlaufbereich sollte mit der Navigationspersonen-ID übereinstimmen (muss der Elternteil sein)
<div id="selector"> <ul> <li><a href="#one">one</a> </li> <li><a href="#two">two</a> </li> <li><a href="#three">three</a> </li> </ul></div><div data-spy="scroll" data-target="#selector" style="height:100px; Überlauf: versteckt; Überlauf-y: Auto; " > <h4 id="one" >ibe</h4><p>One specific content<br/>One specific content<br/>One specific content<br/>One specific content<br/></p> <h4 id="two" >two</h4><p>One specific content<br/>One specific content<br/></p> <h4 id="three" >three</h4><p>One specific content<br/>One specific Inhalt <br/> </p> <h4 id = "drei"> drei </h4> <p> Ein spezifischer Inhalt <br/> Ein spezifischer Inhalt <br/> </p> <h4 id = "drei"> drei </h4> <p> Ein spezifischer Inhalt <br/> Ein spezifischer Inhalt <br/> Ein spezifischer Inhalt <br/> </p> </p>
Quellcodeanalyse:
1. Prinzip: Wenn die Hashkey -Position im Scroll -Container nur der Wert ist, der durch den Offset oben im Container festgelegt ist, wird das entsprechende HREF -Hervorheben in der Navigation festgelegt.
2. Wenn der Bildlaufbereich ein Körper ist, wird das Scrolling -Bereich Element als Fenster gekennzeichnet (im Konstruktor beurteilt).
this. $ (Fenster): $ (Element)
3. GetCrolHeight: Holen Sie sich die Inhaltshöhe des Bildlaufbehälters (einschließlich des versteckten Teils)
Dies. $ Scrollelement [0] .ScrollHeight || Math.max (this.
4. Aktualisieren: Aktualisieren und speichern Sie die Werte jedes Hashkey im Scrollbehälter
4.1. Verwenden Sie den Offset, um den Positionierungswert standardmäßig zu erhalten. Wenn der Bildlaufbereich kein Fenster ist, nutzen Sie die Position, um ihn zu erhalten.
if (! $. isWindow (this. $ scrollelement [0])) {OffsetMethod = 'Position' Offsetbase = this.4.2. Laut dem Hashkey in der Navigation, durchqueren Sie den Offset -Wert, der dem Hashkey im Scrolling -Bereich entspricht:
Dies. $ href.length && $ href.is (': sichtbar') && [$ href [OffsetMethod] (). Top + OffsetBase, href] || that.targets.push (this [1])})5. Prozess: Mit der Funktion "ScrollBar Event Trigger" wird berechnet, welches Navigationsmenü derzeit hervorgehoben werden muss
5.1. Holen Sie sich den Scrollabstand des Bildlaufbehälters:
var scrolltop = this. $ scrollelement.scrolltop () + this.options.offset
5.2. Die maximale Höhe, die der Rollbehälter rollen kann
// Maximale Bildlaufhöhe = Bildlaufeinstellungsabstand (Offset) + Scroll -Container -Inhaltshöhe - Scroll Container Einstellungshöhe var maxscroll = this.options.offset + scrollHeight - this. $ Scrollelement.height ()
5.3. Setzen Sie die Logik der Scrolling -Elemente:
für (i = offsets.length; i--;) {// Übertragen Sie alle Offset ActiveTarget! I+1 Element ist nicht größer als die Bildlaufhöhe && this.aktivieren (Ziele [i]) // Setzen Sie I als aktuelles aktives Element}6. Aktiv: Stellen Sie das angegebene Navigationsmenü auf Marke ein
7. Klar: Klar alle hervorgehobenen Menüs
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.