Scrollspy

Buyekeza ngokuzenzakalela ukuzulazula kwe-Bootstrap noma uhlu lwezingxenye zeqembu ngokusekelwe endaweni yokuskrola ukuze ubonise ukuthi yisiphi isixhumanisi esisebenzayo okwamanje endaweni yokubuka.

Kuleli khasi

Isebenza kanjani

I-Scrollspy inezidingo ezimbalwa ukuze isebenze kahle:

Kufanele isetshenziswe engxenyeni ye-Bootstrap nav noma iqembu lohlu .
I-Scrollspy idinga position: relative;ku-elementi oyihlolayo, ngokuvamile i- <body>.
Amahange ( <a>) ayadingeka futhi kufanele akhombe into enaleyo id.

Lapho isetshenziswe ngempumelelo, i-nav yakho noma iqembu lohlu lizobuyekezwa ngokufanele, lisuse .activeikilasi lisuke entweni eyodwa liye kwelandelayo ngokusekelwe kulokho elikuhlosile okuhlobene.

Iziqukathi eziskrolekayo nokufinyelela kwekhibhodi

Uma wenza isiqukathi esiskroleka (ngaphandle kwe- <body>), qiniseka ukuthi heightunesethi futhi overflow-y: scroll;usetshenziswe kuso—kanye no-a tabindex="0"ukuze uqinisekise ukufinyelela kwekhibhodi.

Skrola indawo engezansi kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo. Izinto zokwehla zizogqanyiswa futhi.

Isihloko sokuqala

Lokhu okunye okuqukethwe kwesibambi sekhasi le-scrollspy. Qaphela ukuthi njengoba uskrolela phansi kwekhasi, isixhumanisi sokuzulazula esifanele siyagqanyiswa. Kuphindwa kuso sonke isibonelo sengxenye. Silokhu sengeza ikhophi eyengeziwe yesibonelo lapha ukuze sigcizelele ukuskrola nokugqamisa.

Isihloko sesibili

Isihloko sesithathu

Isihloko sesine

Isihloko sesihlanu

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

Isibonelo esine-nested nav

I-Scrollspy iphinde isebenze ne-nested .navs. Uma kunesidleke .nav, .activeabazali bayo nabo bazoba .active. Skrola indawo eduze kwe-navbar bese ubuka ukuguquka kwekilasi elisebenzayo.

Into 1

Into 1-1

Iphuzu 1-2

Into 2

Into yesi-3

Into 3-1

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

Isibonelo nge-list-group

I-Scrollspy iphinde isebenze no- .list-groups. Skrola indawo eseduze neqembu lohlu bese ubuka ukuguquka kwekilasi elisebenzayo.

Into 1 Into 2 Into yesi-3 Iphuzu 4

Into 1

Into 2

Into yesi-3

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

Ukusetshenziswa

Ngezibaluli zedatha

Ukwengeza kalula impatho ye-scrollspy ekuzulazuleni kwe data-bs-spy="scroll"-topbar yakho, engeza entweni ofuna ukuyihlola (imvamisa lokhu kuzoba yi- <body>). Bese wengeza data-bs-targetisibaluli nge-ID noma isigaba sesici esingumzali sanoma iyiphi .navingxenye ye-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>

Nge-JavaScript

Ngemva kokungeza position: relative;ku-CSS yakho, shayela i-scrollspy nge-JavaScript:

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

Kudingeka okuqondiwe kwe-ID okungaxazululeka

Izixhumanisi ze-Navbar kufanele zibe neziqondiso ze-id ezingaxazululeka. Isibonelo, <a href="#home">home</a>okumele kuhambisane nento ethize ku-DOM efana ne- <div id="home"></div>.

Izinto eziqondiwe ezingabonakali azinakiwe

Izinto eziqondiwe ezingabonakali zizozitshwa futhi izinto zazo ezihambisanayo azisoze zagqanyiswa.

Izindlela

vuselela

Uma usebenzisa i-scrollspy ngokuhambisana nokwengeza noma ukususa izakhi ku-DOM, uzodinga ukushayela indlela yokuvuselela kanje:

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

lahla

Icekela phansi i-scrollspy yento. (Isusa idatha egciniwe kusici se-DOM)

getInstance

Indlela emile ekuvumela ukuthi uthole isibonelo sokuskrola esihlotshaniswa nesici se-DOM

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

getOrCreateInstance

Indlela emile ekuvumela ukuthi uthole isenzakalo sokuskrola esihlotshaniswa nento ye-DOM, noma udale entsha uma kwenzeka ingaqaliswanga.

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

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-bs-, njengaku data-bs-offset="".

Igama	Uhlobo	Okuzenzakalelayo	Incazelo
`offset`	inombolo	`10`	Amaphikseli okufanele uwasuse ukusuka phezulu uma ubala indawo yokuskrola.
`method`	umucu	`auto`	Ithola ukuthi yisiphi isigaba into eyisihloli esikuso. `auto`izokhetha indlela engcono kakhulu yokuthola izixhumanisi zokuskrola. `offset`izosebenzisa `Element.getBoundingClientRect()`indlela yokuthola izixhumanisi zokuskrola. `position`izosebenzisa i- `HTMLElement.offsetTop`kanye `HTMLElement.offsetLeft`nezakhiwo ukuze ithole izixhumanisi zokuskrola.
`target`	umucu \| into ye-jQuery \| Isici se-DOM		Icacisa into ezosetshenziswa i-plugin ye-Scrollspy.

Imicimbi

Uhlobo lomcimbi	Incazelo
`activate.bs.scrollspy`	Lo mcimbi uvutha kusici sokuskrola noma nini lapho into entsha yenziwa isebenze i-scrollspy.

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

Scrollspy

Isebenza kanjani

Iziqukathi eziskrolekayo nokufinyelela kwekhibhodi

Isibonelo ku-navbar

Isihloko sokuqala

Isihloko sesibili

Isihloko sesithathu

Isihloko sesine

Isihloko sesihlanu

Isibonelo esine-nested nav

Into 1

Into 1-1

Iphuzu 1-2

Into 2

Into yesi-3

Into 3-1

Iphuzu 3-2

Isibonelo nge-list-group

Into 1

Into 2

Into yesi-3

Iphuzu 4

Ukusetshenziswa

Ngezibaluli zedatha

Nge-JavaScript

Kudingeka okuqondiwe kwe-ID okungaxazululeka

Izinto eziqondiwe ezingabonakali azinakiwe

Izindlela

vuselela

lahla

getInstance

getOrCreateInstance

Izinketho

Imicimbi