Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
in English

Scrollspy

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

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.

Isibonelo ku-navbar

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

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 sesithathu

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 sesine

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 sesihlanu

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.

<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

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.

Into 1-1

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.

Iphuzu 1-2

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.

Into 2

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.

Into yesi-3

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.

Into 3-1

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.

Iphuzu 3-2

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.

<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

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.

Into 2

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.

Into yesi-3

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.

Iphuzu 4

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.

<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. autoizokhetha indlela engcono kakhulu yokuthola izixhumanisi zokuskrola. offsetizosebenzisa Element.getBoundingClientRect()indlela yokuthola izixhumanisi zokuskrola. positionizosebenzisa i- HTMLElement.offsetTopkanye HTMLElement.offsetLeftnezakhiwo 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...
})