communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > js tutoriel > Bootstrap doit apprendre la surveillance du défilement tous les jours_compétences javascript

Bootstrap doit apprendre la surveillance du défilement tous les jours_compétences javascript

WBOY

Libérer： 2016-05-16 15:10:26

original

1288 Les gens l'ont consulté

Cet article présente la surveillance du défilement Bootstrap pour que tout le monde puisse l'apprendre. Le contenu spécifique est le suivant

1. Scrollspy nécessite actuellement l'utilisation d'un composant de navigation Bootstrap pour une mise en évidence appropriée des liens actifs.

---- Si vous utilisez la surveillance du défilement, la barre de navigation doit utiliser le composant nav de class="nav":

Ce qui suit est une section du code source, la partie marquée en rouge peut le prouver :

Lorsque vous utilisez ScrollSpy, vous devez utiliser la balise

sous la balise

.

Remarque : De plus, nous devons mettre la balise
dans un autre conteneur (tel que div) et ajouter un identifiant au Propriétés du conteneur parent (ceci est introduit dans la section 4)

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() }
Copier après la connexion
Copier après la connexion

2. Les liens de la barre de navigation doivent avoir des cibles d'identifiant résolubles. Par exemple, un home ;

--- Pour faire simple, la balise sous

doit avoir un attribut href="#id", et il doit y avoir un une telle balise ; lorsque le contenu défile jusqu'à la balise , le

correspondant sera automatiquement choisi.

--En fait, les amis qui ont fait du développement Web le savent. Dans les versions précédentes de HTML, les balises d'ancrage utilisaient généralement , mais les balises d'ancrage en HTML5 ont été abandonnées. attribut name, utilisez l'attribut id

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

Copier après la connexion

3. Quelle que soit la méthode d'implémentation, scrollspy nécessite l'utilisation de position: relative; sur l'élément que vous espionnez. Dans la plupart des cas, il s'agit du . ;, assurez-vous d'avoir une hauteur définie et overflow-y: scroll; appliqué.

--- Si vous surveillez le défilement du corps, alors vous devez ajouter le style position:relative au corps

--- Si ce qui est surveillé n'est pas le corps, mais d'autres éléments [apparemment cette méthode est courante], alors vous devez ajouter trois styles : position:relative;height:500px;overflow -y : scroll;

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

Copier après la connexion

4. Pour ajouter facilement un comportement scrollspy à votre navigation dans la barre supérieure, ajoutez data-spy="scroll" à l'élément que vous souhaitez espionner (le plus souvent, ce sera le ). Ajoutez ensuite la cible de données. attribut avec l'ID ou la classe de l'élément parent de tout composant Bootstrap .nav.

--- Vous devez ajouter l'attribut data-spy="scroll" et l'attribut data-target à l'étiquette du contenu défilant

L'attribut data-spy spécifie l'élément à surveiller et l'attribut data-target spécifie la mise en évidence de la navigation qui doit être contrôlée pendant le défilement

Regardez à nouveau le code source d'initialisation ci-dessous. La position marquée en rouge, la valeur de this.options.target, est égale à la valeur de la cible de données de l'élément de contenu défilant. En voyant cela, vous avez peut-être pensé. cela avant de définir .nav Lors de la création d'un composant, nous devons mettre le .nav dans un autre conteneur (comme un div), et le conteneur doit avoir un attribut id (la même valeur que la cible de données doit être définie ici ).

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

Copier après la connexion

5. Après avoir ajouté position: relative; dans votre CSS, appelez le scrollspy via JavaScript :

$('yourTag').scrollspy({ target: 'nav-parent-div-id' })
-- yourTag est l'ID de l'élément qui doit transporter le contenu défilant, nav-parent-div-id est l'identifiant de l'élément parent de l'élément .nav (c'est-à-dire la valeur de data-target )

J'ai écrit un tas de trucs compliqués, voici un résumé de quelques étapes simples :

　1. Ajouter une balise

2. Ajoutez le composant .nav dans la balise et ajoutez l'attribut href="#tag" à li->a

　3. Ajoutez

;

　4. Ajoutez le style #content{height:500px;overflow-y:scroll;opsition:relative;}

5. Ajoutez le script $('#content').scrollspy({target:'scrollSpyID'});

Enfin, un peu de marron :

<style type="text/css">
    #body {
      position: relative;
      height: 500px;
      overflow-y: scroll;
    }
  </style>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Étiquettes associées：

bootstrap écouteur défilant

source：php.cn

Article précédent：Fullpage.js correction de la barre de navigation implémentant les compétences de la barre de navigation de positionnement_javascript Article suivant：Implémentation d'un chat multi-room basé sur socket.io+express_node.js

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur