Gemeinschaft

Lernen

Tools-Bibliothek

KI-Tools

Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > Bootstrap muss jeden Tag die Bildlaufüberwachung erlernen_Javascript-Fähigkeiten

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2016-05-16 15:10:26

Original

1343 Leute haben es durchsucht

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

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) &#63; $(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()
 }

Nach dem Login kopieren

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

Nach dem Login kopieren

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()
  }

Nach dem Login kopieren

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) &#63; $(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()
 }

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

$(function () {
  $('#body').scrollspy({ target: '#sc' });
});

Nach dem Login kopieren

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

Verwandte Etiketten：

bootstrap scrollender Zuhörer

Vorheriger Artikel：Fullpage.js korrigierte Navigationsleiste – Implementierung der Positionierungsnavigation bar_javascript-Fähigkeiten Nächster Artikel：Implementierung eines Multiroom-Chats basierend auf socket.io+express_node.js

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors