Scrollspy ya kosala

Mikolo oyo automatiquement navigation ya Bootstrap to ba composants ya groupe ya liste na kotalela position ya défilement mpo na kolakisa lien nini ezali activé actuellement na port de vue.

Na lokasa oyo

Ndenge oyo esalaka

Scrollspy ezali na mwa masɛngami mpo na kosala malamu:

Esengeli kosalela yango na composant nav ya Bootstrap to groupe ya liste .
Scrollspy esengaka position: relative;na élément oyo ozali espionnage na yango, mingi mingi <body>.
Ba ancres ( <a>) esengeli mpe esengeli kolakisa élément moko na oyo id.

Ntango esalemi malamu, nav to groupe ya liste na yo ekosala mise à jour na kolanda yango, ekokende na .activekelasi uta na eloko moko kino na oyo elandi na kotalela ba cibles na bango oyo esangisi yango.

Ba conteneurs oyo ekoki ko défiler na accès na clavier

Soki ozali kosala eloko oyo ekoki kobalusama (longola kaka <body>), salá makasi ozala na heightensemble mpe overflow-y: scroll;osaleli yango —pembeni ya a tabindex="0"mpo na kosala ete okɔta na klaviatware.

Défiler na esika oyo ezali na se ya navbar mpe tala mbongwana ya kelasi oyo ezali kosala. Biloko oyo ezali kokita ekozala mpe na bilembo mingi.

Motó ya likambo ya liboso

Oyo ezali mwa makambo ya esika ya kofanda mpo na lokasa ya scrollspy. Yebá ete ntango ozali kokita na lokasa, lien oyo ebongi mpo na kotambola ekobima. Ezali kozongelama na ndakisa mobimba ya composante. Tozali kokoba kobakisa mwa ndakisa mosusu ya kopi awa mpo na kopesa ntina na kosala défilement mpe konyata.

Motó ya likambo ya mibale

Motó ya likambo ya misato

Motó ya likambo ya minei

Motó ya likambo ya mitano

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

Ndakisa na nav oyo ekangami

Scrollspy esalaka mpe na .navs oyo ekangami. Soki nested .navezali .active, baboti na yango mpe bakozala .active. Défiler na esika oyo ezali pembeni ya navbar mpe tala ndenge classe oyo ezali kosala ebongwana.

Likambo 1

Likambo 1-1

Likambo 1-2

Likambo 2

Likambo ya 3

Likambo 3-1

Likambo 3-2

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Ndakisa na liste-group

Scrollspy esalaka mpe na .list-groups. Salá défilement na esika oyo ezali pembeni ya etuluku ya liste mpe talá mbongwana ya kelasi oyo ezali kosala.

Likambo 1 Likambo 2 Likambo ya 3 Likambo ya 4

Likambo 1

Likambo 2

Likambo ya 3

Likambo ya 4

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

Kosalela yango

Na nzela ya ba attributs ya ba données

Mpo na kobakisa na pete bizaleli ya scrollspy na navigation na yo ya topbar, bakisa data-bs-spy="scroll"na élément oyo olingi kosala espionnage (mingi mingi oyo ekozala na <body>). Na sima bakisa data-bs-targetattribut na ID to classe ya élément parent ya .navcomposant nionso ya Bootstrap.

body {
  position: relative;
}

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Na nzela ya JavaScript

Nsima ya kobakisa position: relative;na CSS na yo, benga scrollspy na nzela ya JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Ba cibles ya ID oyo ekoki ko résoudre esengeli

Ba liens ya Navbar esengeli kozala na ba cibles id oyo ekoki ko résoudre. Ndakisa, a <a href="#home">home</a>esengeli ko correspondre na eloko moko na DOM lokola <div id="home"></div>.

Ba éléments cibles oyo emonanaka te ezo ignorer

Ba éléments cibles oyo ezali komonana te ekozala ignorés mpe ba éléments nav correspondants na bango ekozala jamais souligné.

Ba méthodes ya kosala

kozongisa makasi

Ntango ozali kosalela scrollspy elongo na kobakisa to kolongola biloko na DOM, ekosɛnga obenga lolenge ya kozongisa sika lokola boye:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

kobwaka yango

Ebebisaka scrollspy ya élément moko. (Elongolaka ba données oyo ebombami na élément DOM)

kozwaInstance

Méthode statique oyo e permettre yo ozua instance ya scrollspy associé na élément DOM

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

kozwaToKosalaInstance

Méthode statique oyo e permettre yo ozua instance ya scrollspy associé na élément DOM, to osala ya sika au cas où ezalaki initialisé te

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-bs-, lokola na data-bs-offset="".

Nkombo	Lolenge	Mbeba	Ndimbola
`offset`	nimero	`10`	Ba pixels ya ko offset depuis likolo tango ya ko calculer position ya défilement.
`method`	shene	`auto`	Amoni eteni nini élément espionnage ezali na `auto`kati.akopona méthode ya malamu koleka mpo na kozwa ba coordonnées ya défilement. `offset`ekosalela `Element.getBoundingClientRect()`méthode mpo na kozwa ba coordonnées ya défilement. `position`ekosalela ba propriétés mpe mpo na kozwa ba coordonnées ya défilement `HTMLElement.offsetTop`.`HTMLElement.offsetLeft`
`target`	molongo ya molongo \| jEloko ya motuna \| Elemento DOM		Ezali kolakisa eleman mpo na kosalela plugin ya Scrollspy.

Makambo oyo esalemaki

Lolenge ya likambo	Ndimbola
`activate.bs.scrollspy`	Evenement oyo ezo beta na élément ya défilement chaque fois que eloko ya sika ekomi activé na scrollspy.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy ya kosala

Ndenge oyo esalaka

Ba conteneurs oyo ekoki ko défiler na accès na clavier

Ndakisa na navbar

Motó ya likambo ya liboso

Motó ya likambo ya mibale

Motó ya likambo ya misato

Motó ya likambo ya minei

Motó ya likambo ya mitano

Ndakisa na nav oyo ekangami

Likambo 1

Likambo 1-1

Likambo 1-2

Likambo 2

Likambo ya 3

Likambo 3-1

Likambo 3-2

Ndakisa na liste-group

Likambo 1

Likambo 2

Likambo ya 3

Likambo ya 4

Kosalela yango

Na nzela ya ba attributs ya ba données

Na nzela ya JavaScript

Ba cibles ya ID oyo ekoki ko résoudre esengeli

Ba éléments cibles oyo emonanaka te ezo ignorer

Ba méthodes ya kosala

kozongisa makasi

kobwaka yango

kozwaInstance

kozwaToKosalaInstance

Makambo oyo okoki kopona

Makambo oyo esalemaki