Scrollspy
Aġġorna awtomatikament in-navigazzjoni Bootstrap jew elenka l-komponenti tal-grupp ibbażati fuq il-pożizzjoni tal-iscroll biex tindika liema link hija attwalment attiva fil-viewport.
Kif taħdem
Scrollspy għandu ftit rekwiżiti biex jaħdem sew:
- Għandu jintuża fuq komponent Bootstrap nav jew grupp ta 'lista .
- Scrollspy jirrikjedi
position: relative;
fuq l-element li qed tispija fuqu, normalment il-<body>
. - Ankri (
<a>
) huma meħtieġa u għandhom jindikaw element ma ' dakid
.
Meta tiġi implimentata b'suċċess, in-nav jew il-grupp tal-lista tiegħek ser jaġġorna kif xieraq, u jċaqlaq il- .active
klassi minn oġġett għall-ieħor ibbażat fuq il-miri assoċjati tagħhom.
Kontenituri li jistgħu jiskrollaw u aċċess għat-tastiera
Jekk qed tagħmel kontenitur li jiskrollabbli (minbarra l- <body>
), kun żgur li jkollok height
sett u overflow-y: scroll;
applikat miegħu—flimkien ma’ tabindex="0"
biex tiżgura aċċess għat-tastiera.
Eżempju fin-navbar
Skrollja ż-żona taħt in-navbar u ara l-bidla fil-klassi attiva. L-oġġetti dropdown se jiġu enfasizzati wkoll.
L-ewwel intestatura
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
It-tieni intestatura
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
It-tielet intestatura
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
Ir-raba' intestatura
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
Il-ħames intestatura
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
<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>
Eżempju b'nav nested
Scrollspy jaħdem ukoll ma nested .nav
s. Jekk neted .nav
huwa .active
, il-ġenituri tiegħu se jkunu wkoll .active
. Skrollja ż-żona ħdejn in-navbar u ara l-bidla tal-klassi attiva.
Punt 1
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
Punt 1-1
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
Punt 1-2
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
Punt 2
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
Punt 3
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
Punt 3-1
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
Punt 3-2
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
<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>
Eżempju bil-lista-grupp
Scrollspy jaħdem ukoll ma ' .list-group
s. Skrollja ż-żona ħdejn il-grupp tal-lista u ara l-bidla tal-klassi attiva.
Punt 1
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
Punt 2
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
Punt 3
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
Punt 4
Dan huwa xi kontenut ta' placeholder għall-paġna scrollspy. Innota li hekk kif tiskrollja 'l isfel fil-paġna, il-link ta' navigazzjoni xierqa tiġi enfasizzata. Huwa ripetut matul l-eżempju tal-komponent. Aħna nkomplu nżidu xi kopja ta' eżempju aktar hawn biex nenfasizzaw l-iskrolljar u l-enfasi.
<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>
Użu
Via attributi tad-data
Biex iżżid faċilment l-imġieba scrollspy man-navigazzjoni topbar tiegħek, żid data-bs-spy="scroll"
mal-element li trid tispija fuqu (l-aktar tipikament dan ikun il- <body>
). Imbagħad żid l- data-bs-target
attribut bl-ID jew il-klassi tal-element ġenitur ta 'kwalunkwe .nav
komponent 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>
Via JavaScript
Wara li żżid position: relative;
fis-CSS tiegħek, ċempel l-iscrollspy permezz ta' JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Miri ta' ID riżolvibbli meħtieġa
Ir-rabtiet tan-Navbar għandu jkollhom miri id risolvibbli. Per eżempju, <a href="#home">home</a>
għandu jikkorrispondi għal xi ħaġa fid-DOM bħal <div id="home"></div>
.
Elementi fil-mira mhux viżibbli injorati
Elementi fil-mira li mhumiex viżibbli se jiġu injorati u l-oġġetti tan-nav korrispondenti tagħhom qatt mhu se jiġu enfasizzati.
Metodi
aġġorna
Meta tuża scrollspy flimkien maż-żieda jew it-tneħħija ta 'elementi mid-DOM, ikollok bżonn issejjaħ il-metodu ta' aġġornar hekk:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
jiddisponi
Jeqred scrollspy ta' element. (Tneħħi d-dejta maħżuna fuq l-element DOM)
getInstance
Metodu statiku li jippermettilek tikseb l-iscrollspy istanza assoċjata ma 'element DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Metodu statiku li jippermettilek li tikseb l-iscrollspy istanza assoċjata ma 'element DOM, jew toħloq waħda ġdida f'każ li ma kienx inizjalizzat
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Għażliet
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-bs-
, bħal f' data-bs-offset=""
.
Isem | Tip | Default | Deskrizzjoni |
---|---|---|---|
offset |
numru | 10 |
Pixels biex ipattu minn fuq meta tikkalkula l-pożizzjoni tal-iscroll. |
method |
spag | auto |
Isib f'liema sezzjoni jinsab l-element spied. auto Se jagħżel l-aħjar metodu biex tikseb il-koordinati tal-iscroll. offset se tuża l- Element.getBoundingClientRect() metodu biex tikseb il-koordinati tal-iscroll. position se tuża l- HTMLElement.offsetTop u HTMLElement.offsetLeft proprjetajiet biex tikseb koordinati tal-iscroll. |
target |
spag | Oġġett jQuery | Element DOM | Jispeċifika l-element biex japplika Scrollspy plugin. |
Avvenimenti
Tip ta' avveniment | Deskrizzjoni |
---|---|
activate.bs.scrollspy |
Dan l-avveniment jispara fuq l-element tal-iscroll kull meta oġġett ġdid jiġi attivat mill-iscrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})