Tsibela kumxholo oyintloko Tsibela kukhangelo lwamaxwebhu
in English

Scrollspy

Hlaziya ngokuzenzekelayo ukukhangela kweBootstrap okanye uluhlu lwamalungu eqela ngokusekelwe kwindawo yokuskrola ukubonisa ukuba leliphi ikhonkco elisebenzayo ngoku kwindawo yokujonga.

Ingaba isebenza kanjani

IScrollspy ineemfuno ezimbalwa zokusebenza ngokufanelekileyo:

  • Kufuneka isetyenziswe kwi Bootstrap nav inxalenye okanye uluhlu lweqela .
  • I-Scrollspy ifuna position: relative;into oyihlolayo, ngokwesiqhelo i <body>.
  • Iiankile ( <a>) ziyafuneka kwaye kufuneka zalathe kwinto enaloo nto id.

Xa iphunyezwe ngempumelelo, i-nav yakho okanye iqela loluhlu liya kuhlaziya ngokufanelekileyo, lihambisa .activeiklasi ukusuka kwinto enye ukuya kwelandelayo ngokusekelwe kwiithagethi zabo ezinxulumene nazo.

Izikhongozeli eziskrolekayo kunye nokufikelela kwibhodi yezitshixo

Ukuba wenza isikhongozeli esiskrolekayo (ngaphandle kwe <body>), qiniseka ukuba heightuneseti kwaye overflow-y: scroll;usetyenziswe kuyo — ecaleni kwe-a tabindex="0"ukuze uqinisekise ukufikelela kwibhodi yezitshixo.

Umzekelo kwi-navbar

Skrolela indawo engezantsi kwe-navbar kwaye ubukele utshintsho lweklasi esebenzayo. Izinto eziya kuhla nazo ziya kuphawulwa.

Isihloko sokuqala

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Isihloko sesibini

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Isihloko sesithathu

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Isihloko sesine

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Isihloko sesihlanu

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

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

Umzekelo ngendlwane nav

I-Scrollspy iphinda isebenze kunye ne-nested .navs. Ukuba kukho indlwane .nav, .activeabazali bayo nabo baya kuba .active. Skrolela indawo ecaleni kwebar ye-nav kwaye ubukele utshintsho lweklasi esebenzayo.

Umba woku-1

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Umba 1-1

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Into 1-2

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Into yesi-2

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Into yesi-3

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Umba 3-1

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Into 3-2

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

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

Umzekelo kunye noluhlu-iqela

I-Scrollspy isebenza kunye no- .list-groups. Skrolela indawo ecaleni kweqela loluhlu kwaye ubukele utshintsho lweklasi esebenzayo.

Umba woku-1

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Into yesi-2

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Into yesi-3

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

Into yesi-4

Lo ngomnye umxholo wesibambi-ndawo wephepha lokuskrola. Qaphela ukuba njengoko uskrolela ezantsi iphepha, ikhonkco lokukhangela elifanelekileyo liyaphawulwa. Iphindwa kumzekelo wecandelo. Sihlala sisongeza ikopi yomzekelo apha ukugxininisa ukuskrola kunye nokuqaqambisa.

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

Ukusetyenziswa

Ngeempawu zedatha

Ukongeza ngokulula isimilo sokuskrola kulawulo lwakho lwebar engaphezulu, yongeza data-bs-spy="scroll"kwinto ofuna ukuyihlola (ubukhulu becala le iya kuba yi <body>). Emva koko yongeza data-bs-targetuphawu kunye ne-ID okanye udidi lwelungu lomzali walo naliphi na ilungu le-Bootstrap .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>

NgeJavaScript

Emva kokongeza position: relative;kwiCSS yakho, fowunela i-scrollspy ngeJavaScript:

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

Iithagethi zeSazisi ezinokusonjululwa ziyafuneka

Unxulumano lwebar yeNavbar kufuneka lube nethagethi ye-id enokusombululeka. Umzekelo, <a href="#home">home</a>kufuneka ihambelane nento ekwiDOM efana <div id="home"></div>.

Izinto ekujoliswe kuzo ezingabonakaliyo azihoywanga

Izinto ekujoliswe kuzo ezingabonakaliyo aziyi kuhoywa kwaye izinto zazo ze-nav ezihambelanayo azisayi kuphawulwa.

Iindlela

hlaziya

Xa usebenzisa i-scrollspy ngokudibanisa okanye ukususa izinto kwi-DOM, kuya kufuneka ufowunele indlela yokuhlaziya ngolu hlobo:

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

lahla

Itshabalalisa iscrollspy ye element. (Isusa idatha egciniweyo kwisiqalelo seDOM)

getInstance

Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wokuskrola onxulunyaniswa nento yeDOM

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

getOrCreateInstance

Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wokuskrola onxulunyaniswa nento yeDOM, okanye wenze entsha ukuba ayikhange iqalwe.

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

Iinketho

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-bs-, njengakwi data-bs-offset="".

Igama Uhlobo Ukuhlala kukho Inkcazo
offset inani 10 Iipikseli zokulinganisa ukusuka phezulu xa ubala indawo yokuskrola.
method umtya auto Ifumana ukuba leliphi icandelo elikuyo into yokujonga. autoiya kukhetha eyona ndlela ilungileyo yokufumana ulungelelwaniso lokuskrola. offsetizakusebenzisa Element.getBoundingClientRect()indlela yokufumana izilungelelanisi zokuskrola. positionizakusebenzisa i HTMLElement.offsetTopkunye HTMLElement.offsetLeftneepropati ukufumana ulungelelwaniso lokuskrola.
target umtya | jQuery into | Into ye-DOM Ikhankanya into yokufaka iplagi yeScrollspy.

Iziganeko

Uhlobo lomsitho Inkcazo
activate.bs.scrollspy Esi siganeko sivutha kwinto yokuskrola nanini na xa into entsha ivulwa yi-scrollspy.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})