Scrollspy

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

Orrialde honetan

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.

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

Hirugarren goiburua

Laugarren goiburua

Bosgarren goiburua

<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

1-1 elementua

1-2 elementua

2. elementua

3. elementua

3-1 elementua

3-2 elementua

<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 2. elementua 3. elementua 4. elementua

1. elementua

2. elementua

3. elementua

4. elementua

<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. `auto`Korritzeko koordenatuak lortzeko metodo onena aukeratuko du. metodoa `offset`erabiliko 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...
})

Scrollspy

Nola dabil

Korritu daitezkeen edukiontziak eta teklatuaren sarbidea

Adibidea nabigazio barran

Lehenengo goiburua

Bigarren goiburua

Hirugarren goiburua

Laugarren goiburua

Bosgarren goiburua

Adibidea nabigazio habiaratuarekin

1. elementua

1-1 elementua

1-2 elementua

2. elementua

3. elementua

3-1 elementua

3-2 elementua

Adibidea zerrenda-taldearekin

1. elementua

2. elementua

3. elementua

4. elementua

Erabilera

Datu-atributuen bidez

JavaScript bidez

Ebatzi daitezkeen ID-helburuak behar dira

Ikusgai ez diren xede-elementuak baztertu dira

Metodoak

freskatu

bota

getInstance

getOrCreateInstance

Aukerak

Gertaerak