Scrollspy

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

Kweli phepha

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.

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

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>

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

Umba 1-1

Into 1-2

Into yesi-2

Into yesi-3

Umba 3-1

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

Umzekelo kunye noluhlu-iqela

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

Umba woku-1 Into yesi-2 Into yesi-3 Into yesi-4

Umba woku-1

Into yesi-2

Into yesi-3

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

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. `auto`iya kukhetha eyona ndlela ilungileyo yokufumana ulungelelwaniso lokuskrola. `offset`izakusebenzisa `Element.getBoundingClientRect()`indlela yokufumana izilungelelanisi zokuskrola. `position`izakusebenzisa i `HTMLElement.offsetTop`kunye `HTMLElement.offsetLeft`neepropati 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...
})

Scrollspy

Ingaba isebenza kanjani

Izikhongozeli eziskrolekayo kunye nokufikelela kwibhodi yezitshixo

Umzekelo kwi-navbar

Isihloko sokuqala

Isihloko sesibini

Isihloko sesithathu

Isihloko sesine

Isihloko sesihlanu

Umzekelo ngendlwane nav

Umba woku-1

Umba 1-1

Into 1-2

Into yesi-2

Into yesi-3

Umba 3-1

Into 3-2

Umzekelo kunye noluhlu-iqela

Umba woku-1

Into yesi-2

Into yesi-3

Into yesi-4

Ukusetyenziswa

Ngeempawu zedatha

NgeJavaScript

Iithagethi zeSazisi ezinokusonjululwa ziyafuneka

Izinto ekujoliswe kuzo ezingabonakaliyo azihoywanga

Iindlela

hlaziya

lahla

getInstance

getOrCreateInstance

Iinketho

Iziganeko