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

verwenden und unter dem Tag
• muss sich ein befinden.

  Hinweis: Außerdem müssen wir das Tag

  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 home etwas im DOM entsprechen ;.

  --- Um es einfach auszudrücken: Das -Tag unter

  • muss ein href="#id"-Attribut haben und es muss ein entsprechendes ein solches Tag; wenn der Inhalt zum Tag scrollt, wird automatisch das entsprechende
  • angezeigt ausgewählt.

  --Tatsächlich wissen dies Freunde, die Webentwicklung betrieben haben, dass Anker-Tags normalerweise 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

  ;, 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

  ). 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ügen

  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

  ; 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.