Bootstrap muss jeden Tag die Bildlaufüberwachung erlernen_Javascript-Fähigkeiten

In diesem Artikel wird die Bootstrap-Scroll-Überwachung vorgestellt, damit jeder sie lernen kann. Der spezifische Inhalt ist wie folgt

1. Scrollspy erfordert derzeit die Verwendung einer Bootstrap-Navigationskomponente, um aktive Links richtig hervorzuheben.

---- Wenn Sie die Scroll-Überwachung verwenden, muss die Navigationsleiste die Navigationskomponente von class="nav" verwenden:

Das Folgende ist ein Abschnitt des Quellcodes, der rot markierte Teil kann dies beweisen:

Wenn Sie ScrollSpy verwenden, müssen Sie das Tag 73a72cdc17fc2b29bb35d64b4687fa7c verwenden und unter dem Tag 25edfb22a4f469ecb59f1190150159c6 muss sich ein 3499910bf9dac5ae3c52d5ede7383485 befinden.

Hinweis: Außerdem müssen wir das Tag 73a72cdc17fc2b29bb35d64b4687fa7c in einen anderen Container einfügen (z. B. div) und eine ID hinzufügen Eigenschaften des übergeordneten Containers (dies wird in Abschnitt 4 vorgestellt)

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-Links müssen auflösbare ID-Ziele haben. Beispielsweise muss ein bdbe26872a334f3b7c83b8ae7c50ac47home5db79b134e9f6b82c0b36e0489ee08ed etwas im DOM entsprechen ;16b28748ea4df4d9c2150843fecfba68.

--- Um es einfach auszudrücken: Das 3499910bf9dac5ae3c52d5ede7383485-Tag unter 25edfb22a4f469ecb59f1190150159c6 muss ein href="#id"-Attribut haben und es muss ein entsprechendes 968eb94c118f8e21c12e7c92d3d58deb5db79b134e9f6b82c0b36e0489ee08ed ein solches Tag; wenn der Inhalt zum Tag 5ffad543fdd9d71340ebb3c2c670dbf3 scrollt, wird automatisch das entsprechende 25edfb22a4f469ecb59f1190150159c62dac5b3c1a71acb02bf03dd588b09a33 angezeigt ausgewählt.

--Tatsächlich wissen dies Freunde, die Webentwicklung betrieben haben, dass Anker-Tags normalerweise bc8f08fb0993388c993dc7bf88c0ef43 verwendet wurden, aber Anker-Tags wurden in HTML5 aufgegeben Namensattribut, verwenden Sie das ID-Attribut

 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. Unabhängig von der Implementierungsmethode erfordert scrollspy die Verwendung von position: relative; für das Element, das Sie ausspionieren. In den meisten Fällen ist dies der 6c04bd5ca3fcae76e30b72ad730ca86d ;, stellen Sie sicher, dass eine Höhe eingestellt ist und overflow-y: scroll; angewendet wird.

--- Wenn Sie das Scrollen des Körpers überwachen, müssen Sie dem Körper den Stil „position:relative“ hinzufügen

--- Wenn nicht der Körper, sondern andere Elemente überwacht werden [anscheinend ist diese Methode üblich], müssen Sie drei Stile hinzufügen: position:relative;height:500px;overflow -y :scrollen;

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. Um das Scrollspy-Verhalten einfach zu Ihrer Topbar-Navigation hinzuzufügen, fügen Sie data-spy="scroll" zu dem Element hinzu, das Sie ausspionieren möchten (normalerweise ist dies der 6c04bd5ca3fcae76e30b72ad730ca86d). Fügen Sie dann das data-target hinzu Attribut mit der ID oder Klasse des übergeordneten Elements einer beliebigen Bootstrap-.navcomponent.

--- Sie müssen das Attribut data-spy="scroll" und das Attribut data-target zur Beschriftung des Bildlaufinhalts hinzufügen

Das data-spy-Attribut gibt das zu überwachende Element an, und das data-target-Attribut gibt die Navigationshervorhebung an, die beim Scrollen gesteuert werden muss

Sehen Sie sich noch einmal den Initialisierungsquellcode unten an, der Wert von this.options.target entspricht dem Wert des Datenziels des scrollenden Inhaltselements Bevor wir .nav definieren, müssen wir beim Erstellen einer Komponente die .nav-Datei in einen anderen Container (z. B. ein Div) einfügen und der Container muss über ein ID-Attribut verfügen (derselbe Wert wie das Datenziel muss hier festgelegt werden). ).

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. Nachdem Sie position: relative; in Ihrem CSS hinzugefügt haben, rufen Sie den Scrollspy über JavaScript auf:

$('yourTag').scrollspy({ target: 'nav-parent-div-id' })
-- yourTag ist die ID des Elements, das den Bildlaufinhalt tragen soll, nav-parent-div-id ist die ID des übergeordneten Elements des .nav-Elements (d. h. der Wert von data-target). )

Ich habe eine Menge chaotisches Zeug geschrieben, hier ist eine Zusammenfassung einiger einfacher Schritte:

　1. Tag hinzufügen240da3ef6b880ee42429071353b2bdbe

2. Fügen Sie die .nav-Komponente innerhalb des Tags hinzu und fügen Sie das Attribut href="#tag" zu li->a

hinzu

　3. Fügen Sie d111d6fe33c5d1eadcb1b41531cb3333; hinzu

　4. Stil hinzufügen #content{height:500px;overflow-y:scroll;opsition:relative;}

5. Skript hinzufügen $('#content').scrollspy({target:'scrollSpyID'});

Zum Schluss noch eine kleine Kastanie:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.