Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
in English

Scrollspy

Eguneratu automatikoki Bootstrap nabigazioa edo zerrenda taldeen osagaiak korritze-posizioaren arabera, une honetan bistaratzeko esteka aktibo dagoen adierazteko.

Nola dabil

Scrollspy-k behar bezala funtzionatzeko baldintza batzuk ditu:

  • Bootstrap nav osagai edo zerrenda talde batean erabili behar da .
  • Scrollspy position: relative;-k zelatatzen ari zaren elementua eskatzen du, normalean <body>.
  • Aingurak ( <a>) beharrezkoak dira eta horrekin duen elementu bat adierazi behar dute id.

Arrakastaz inplementatzen denean, zure nabigazioa edo zerrenda taldea horren arabera eguneratuko da, eta .activeklasea elementu batetik bestera eramango du lotutako helburuen arabera.

Korritu daitezkeen edukiontziak eta teklatuaren sarbidea

Korritu daitekeen edukiontzi bat egiten ari bazara (ez beste <body>), ziurtatu heightmultzo bat duzula eta overflow-y: scroll;horri aplikatuta, tabindex="0"teklatuaren sarbidea bermatzeko batekin batera.

Adibidea nabigazio barran

Joan nabigazio-barraren azpiko eremua eta ikusi klase aktiboaren aldaketa. Goitibeherako elementuak ere nabarmenduko dira.

Lehenengo goiburua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

Bigarren goiburua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

Hirugarren goiburua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

Laugarren goiburua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

Bosgarren goiburua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

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

Adibidea nabigazio habiaratuarekin

Scrollspy habiaratuekin ere funtzionatzen du .nav. Habiaratua .navbada .active, bere gurasoak ere izango dira .active. Joan nabigazio barraren ondoko eremua eta ikusi klase aktiboaren aldaketa.

1. elementua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

1-1 elementua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

1-2 elementua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

2. elementua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

3. elementua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

3-1 elementua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

3-2 elementua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

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

Adibidea zerrenda-taldearekin

Scrollspy- .list-groupk s-rekin ere funtzionatzen du. Joan zerrenda taldearen ondoko eremua eta ikusi klase aktiboaren aldaketa.

1. elementua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

2. elementua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

3. elementua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

4. elementua

Hau scrollspy orrirako leku-markaren edukia da. Kontuan izan orrialdean behera korritzen duzun heinean, nabigazio-esteka egokia nabarmentzen dela. Osagaiaren adibidean zehar errepikatzen da. Adibide kopia gehiago gehitzen jarraitzen dugu hemen korritzea eta nabarmentzea azpimarratzeko.

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

Erabilera

Datu-atributuen bidez

Scrollspy portaera zure goiko barrako nabigazioan erraz gehitzeko, gehitu data-bs-spy="scroll"espioi nahi duzun elementuari (normalean hau izango litzateke <body>). Ondoren, gehitu atributua Bootstrap-eko edozein osagairen data-bs-targetelementu nagusiaren ID edo klasearekin ..nav

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>

JavaScript bidez

Zure CSS gehitu ondoren position: relative;, deitu scrollspy JavaScript bidez:

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

Ebatzi daitezkeen ID-helburuak behar dira

Nabbar-en estekek id-helburu konpongarriak izan behar dituzte. Adibidez, <a href="#home">home</a>behar bat DOM bezalako zerbaiti dagokio <div id="home"></div>.

Ikusgai ez diren xede-elementuak baztertu dira

Ikusten ez diren xede-elementuak ez dira aintzat hartuko eta dagozkien nabigazio-elementuak ez dira inoiz nabarmenduko.

Metodoak

freskatu

Scrollspy DOMetik elementuak gehitzearekin edo kentzearekin batera erabiltzean, freskatzeko metodora deitu beharko duzu honela:

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

bota

Elementu baten scrollspy suntsitzen du. (DOM elementuan gordetako datuak kentzen ditu)

getInstance

Metodo estatikoa DOM elementu batekin lotutako scrollspy instantzia lortzeko aukera ematen duena

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

getOrCreateInstance

Metodo estatikoa , DOM elementu batekin erlazionatutako scrollspy instantzia lortzeko edo berri bat sortzeko aukera ematen duena, hasieratu ez bazen.

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-bs-, hemen bezala data-bs-offset="".

Izena Mota Lehenetsia Deskribapena
offset zenbakia 10 Goitik desplazatzeko pixelak korrituaren posizioa kalkulatzean.
method katea auto Elementu espiatua zein sekziotan dagoen aurkitzen du. autoKorritzeko koordenatuak lortzeko metodo onena aukeratuko du. metodoa offseterabiliko du korritze-koordenatuak lortzeko. eta propietateak erabiliko ditu korritze-koordenatuak lortzeko.Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft
target katea | jQuery objektua | DOM elementua Scrollspy plugina aplikatzeko elementua zehazten du.

Gertaerak

Gertaera mota Deskribapena
activate.bs.scrollspy Gertaera honek korritze-elementuari eragiten dio scrollspy-k elementu berri bat aktibatzen duen bakoitzean.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})