Scrollspy
Gadziridza otomatiki kufamba kweBootstrap kana rondedzero yezvikamu zveboka zvichibva pane yekumisikidza chinzvimbo kuratidza kuti ndechipi chinongedzo chiri kushanda munzvimbo yekuona.
Zvinoshanda sei
Scrollspy inoshandura kirasi .activepane anchor ( <a>) zvinhu kana chinhu chine chinongedzerwa nechibatiso chinopetwa chichionekwa . Scrollspy inoshandiswa zvakanyanya pamwe chete neBootstrap nav chikamu kana rondedzero boka , asi inoshandawo nechero anchor zvinhu mune yazvino peji. Hezvino mashandiro ayo.idhref
-
Kuti utange, scrollspy inoda zvinhu zviviri: kufamba, rondedzero boka, kana seti yakapfava yezvinongedzo, pamwe nemudziyo unotenderedzwa. Chigaba chinotenderedzwa chinogona kunge chiri icho
<body>kana chetsika chinhu chine setiheightuyeoverflow-y: scroll. -
Pamudziyo unotenderedzwa, wedzera
data-bs-spy="scroll"uyedata-bs-target="#navId"kupinavIdndiko kwakasiyanaidkweiyo yakabatana navigation. Iva nechokwadi chekuisawo atabindex="0"kuti uve nechokwadi chekuwana keyboard. -
Sezvo iwe uchikwenya "spied" mudziyo,
.activekirasi inowedzerwa uye inobviswa kubva kune anchor zvinongedzo mukati meyakabatana navigation. Manongedzo anofanirwa kunge aineidzvinangwa zvinogadziriswa, zvikasadaro anofuratirwa. Semuenzaniso,<a href="#home">home</a>inofanirwa kuenderana nechimwe chinhu chiri muDOM senge<div id="home"></div> -
Zvinhu zvakanangwa zvisingaonekwe zvichafuratirwa. Ona chikamu cheZvisingaonekwi pazasi.
Mienzaniso
Navbar
Skrodza nzvimbo iri pazasi pebhari uye tarisa iyo inoshanda kirasi shanduko. Vhura menyu yekudonhedza uye tarisa zvinhu zvinodonha zvichiratidzwa zvakare.
Musoro wekutanga
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Musoro wechipiri
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Musoro wechitatu
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Musoro wechina
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Musoro wechishanu
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
<nav id="navbar-example2" class="navbar bg-light px-3 mb-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-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" 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>
Nested nav
Scrollspy inoshandawo ne nested .navs. Kana dendere .navriripo .active, vabereki varo vanenge varivo .active. Skoka nzvimbo iri padyo nebhari uye tarisa iyo inoshanda kirasi shanduko.
Chinhu 1
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Ramba uchifunga kuti JavaScript plugin inoedza kutora chinhu chakakodzera pakati pezvose zvinogona kuoneka. Multiple inoonekwa scrollspy zvinangwa panguva imwe chete zvinogona kukonzera dzimwe nyaya.
Chinhu 1-1
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Ramba uchifunga kuti JavaScript plugin inoedza kutora chinhu chakakodzera pakati pezvose zvinogona kuoneka. Multiple inoonekwa scrollspy zvinangwa panguva imwe chete zvinogona kukonzera dzimwe nyaya.
Chinhu 1-2
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Ramba uchifunga kuti JavaScript plugin inoedza kutora chinhu chakakodzera pakati pezvose zvinogona kuoneka. Multiple inoonekwa scrollspy zvinangwa panguva imwe chete zvinogona kukonzera dzimwe nyaya.
Chinhu 2
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Ramba uchifunga kuti JavaScript plugin inoedza kutora chinhu chakakodzera pakati pezvose zvinogona kuoneka. Multiple inoonekwa scrollspy zvinangwa panguva imwe chete zvinogona kukonzera dzimwe nyaya.
Chinhu 3
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Ramba uchifunga kuti JavaScript plugin inoedza kutora chinhu chakakodzera pakati pezvose zvinogona kuoneka. Multiple inoonekwa scrollspy zvinangwa panguva imwe chete zvinogona kukonzera dzimwe nyaya.
Chinhu 3-1
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Ramba uchifunga kuti JavaScript plugin inoedza kutora chinhu chakakodzera pakati pezvose zvinogona kuoneka. Multiple inoonekwa scrollspy zvinangwa panguva imwe chete zvinogona kukonzera dzimwe nyaya.
Chinhu 3-2
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Ramba uchifunga kuti JavaScript plugin inoedza kutora chinhu chakakodzera pakati pezvose zvinogona kuoneka. Multiple inoonekwa scrollspy zvinangwa panguva imwe chete zvinogona kukonzera dzimwe nyaya.
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
<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>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="item-1">
<h4>Item 1</h4>
<p>...</p>
</div>
<div id="item-1-1">
<h5>Item 1-1</h5>
<p>...</p>
</div>
<div id="item-1-2">
<h5>Item 1-2</h5>
<p>...</p>
</div>
<div id="item-2">
<h4>Item 2</h4>
<p>...</p>
</div>
<div id="item-3">
<h4>Item 3</h4>
<p>...</p>
</div>
<div id="item-3-1">
<h5>Item 3-1</h5>
<p>...</p>
</div>
<div id="item-3-2">
<h5>Item 3-2</h5>
<p>...</p>
</div>
</div>
</div>
</div>
Rondedzera boka
Scrollspy inoshandawo nes .list-group. Skrodza nzvimbo iri padivi peboka rezita uye woona shanduko yekirasi inoshanda.
Chinhu 1
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Chinhu 2
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Chinhu 3
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Chinhu 4
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
<div class="row">
<div class="col-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>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" 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>
</div>
</div>
Zvibatiso zviri nyore
Scrollspy haina kuganhurirwa kune nav zvikamu uye rondedzero mapoka, saka ichashanda pane chero <a>anchor zvinhu mugwaro razvino. Peta nzvimbo uye tarisa .activekirasi ichichinja.
Chinhu 1
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Chinhu 2
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Chinhu 3
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Chinhu 4
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
Chinhu 5
Izvi ndezvimwe zvechibatiso che peji reku scrollspy. Ziva kuti paunenge uchikwenya pasi peji, iyo yakakodzera yekufambisa link inoiswa pachena. Inodzokororwa mukati mechikamu chemuenzaniso. Isu tinoramba tichiwedzera mumwe muenzaniso kopi pano kusimbisa kupururudza uye kuratidza.
<div class="row">
<div class="col-4">
<div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
<a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
<a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
<a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
<a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
<a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
<h4 id="simple-list-item-1">Item 1</h4>
<p>...</p>
<h4 id="simple-list-item-2">Item 2</h4>
<p>...</p>
<h4 id="simple-list-item-3">Item 3</h4>
<p>...</p>
<h4 id="simple-list-item-4">Item 4</h4>
<p>...</p>
<h4 id="simple-list-item-5">Item 5</h4>
<p>...</p>
</div>
</div>
</div>
Zvinhu zvisingaoneki
Zvinhu zvakanangwa zvisingaonekwe zvichafuratirwa uye zvinhu zvinoenderana nazvo hazvigamuchire .activekirasi. Scrollspy zviitiko zvakatangwa mune isingaonekwe wrapper inofuratira zvese zvinonangwa zvinhu. Shandisa refreshnzira yekutarisa zvinhu zvinoonekwa kana wrapper yaonekwa.
document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
el.addEventListener('shown.bs.tab', () => {
const target = el.getAttribute('data-bs-target')
const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
})
})
Usage
Via data hunhu
Kuti uwedzere nyore scrollspy maitiro kune yako topbar navigation, wedzera data-bs-spy="scroll"kune chinhu chaunoda kunosora (kazhinji ichi chingave icho <body>). Wobva wawedzera data-bs-targethunhu neiyo idkana kirasi zita remubereki chinhu cheBootstrap .navchikamu.
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Via JavaScript
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Options
As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".
As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.
| Name | Type | Default | Description |
|---|---|---|---|
rootMargin |
string | 0px 0px -25% |
Intersection Observer rootMargin valid units, when calculating scroll position. |
smoothScroll |
boolean | false |
Enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables. |
target |
string, DOM element | null |
Specifies element to apply Scrollspy plugin. |
threshold |
array | [0.1, 0.5, 1] |
IntersectionObserver threshold valid input, when calculating scroll position. |
Deprecated Options
Up until v5.1.3 we were using offset & method options, which are now deprecated and replaced by rootMargin. To keep backwards compatibility, we will continue to parse a given offset to rootMargin, but this feature will be removed in v6.
Methods
| Method | Description |
|---|---|
dispose |
Destroys an element’s scrollspy. (Removes stored data on the DOM element) |
getInstance |
Static method to get the scrollspy instance associated with a DOM element. |
getOrCreateInstance |
Static method to get the scrollspy instance associated with a DOM element, or to create a new one in case it wasn’t initialized. |
refresh |
When adding or removing elements in the DOM, you’ll need to call the refresh method. |
Here’s an example using the refresh method:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
Events
| Event | Description |
|---|---|
activate.bs.scrollspy |
This event fires on the scroll element whenever an anchor is activated by the scrollspy. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})