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

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 73a72cdc17fc2b29bb35d64b4687fa7c, et il doit y avoir une balise 3499910bf9dac5ae3c52d5ede7383485 sous la balise 25edfb22a4f469ecb59f1190150159c6.

Remarque : De plus, nous devons mettre la balise 73a72cdc17fc2b29bb35d64b4687fa7c 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()
 }

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

--- Pour faire simple, la balise 3499910bf9dac5ae3c52d5ede7383485 sous 25edfb22a4f469ecb59f1190150159c6 doit avoir un attribut href="#id", et il doit y avoir un 0135be485c1e4b0cf552880ee8102e885db79b134e9f6b82c0b36e0489ee08ed une telle balise ; lorsque le contenu défile jusqu'à la balise 5ffad543fdd9d71340ebb3c2c670dbf3, le 25edfb22a4f469ecb59f1190150159c62dac5b3c1a71acb02bf03dd588b09a33 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 bc8f08fb0993388c993dc7bf88c0ef43, 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')
 }

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 6c04bd5ca3fcae76e30b72ad730ca86d. ;, 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()
  }

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 6c04bd5ca3fcae76e30b72ad730ca86d). 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) ? $(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. 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 balise240da3ef6b880ee42429071353b2bdbe

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

　3. Ajoutez d111d6fe33c5d1eadcb1b41531cb3333;

　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>

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

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.