Scrollspy
Ntlafatsa ka boiketsetso ho tsamaea ha Bootstrap kapa lethathamo la likarolo tsa sehlopha ho ipapisitse le boemo ba moqolo ho bontša hore na ke sehokelo sefe se sebetsang hona joale boema-kepe.
Kamoo e sebetsang kateng
Scrollspy e na le litlhoko tse 'maloa hore e sebetse hantle:
- E tlameha ho sebelisoa ho karolo ea Bootstrap nav kapa sehlopha sa lenane .
- Scrollspy e hloka
position: relative;
ntho eo u ntseng u e hloela, hangata<body>
. - Liankora (
<a>
) lia hlokahala 'me li tlameha ho supa ntho e nang le eonaid
.
Ha e kengoa tšebetsong ka katleho, sehlopha sa hau sa nav kapa lethathamo se tla nchafatsa ka nepo, se tsamaisa .active
sehlopha ho tloha nthong e 'ngoe ho ea ho se seng ho latela lipehelo tse amanang le tsona.
Lits'oants'o tse tsamaisoang le phihlello ea keyboard
Haeba u etsa setshelo se scrollable (ntle le sa <body>
), etsa bonnete ba hore u na le height
sete mme overflow-y: scroll;
u se kentse ho sona-haufi le a tabindex="0"
ho netefatsa phihlello ea keyboard.
Mohlala ho navbar
Tsamaisetsa sebaka se ka tlase ho navbar 'me u shebelle phetoho ea sehlopha se sebetsang. Lintho tse theoleloang li tla totobatsoa hape.
Sehlooho sa pele
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Sehlooho sa bobeli
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Sehlooho sa boraro
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Sehlooho sa bone
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Sehlooho sa bohlano
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
<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>
Mohlala ka sehlaha nav
Scrollspy e boetse e sebetsa le sehlaha sa .nav
s. Haeba sehlaha .nav
se le teng .active
, batsoali ba sona le bona ba tla .active
. Tsamaisetsa sebaka se haufi le navbar 'me u shebelle phetoho ea sehlopha se sebetsang.
Ntlha ea 1
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Ntlha ea 1-1
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Ntlha ea 1-2
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Ntlha ea 2
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Ntlha ea 3
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Ntlha ea 3-1
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Ntlha ea 3-2
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
<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>
Mohlala le sehlopha-sehlopha
Scrollspy e boetse e sebetsa le .list-group
s. Tsamaisetsa sebaka se haufi le sehlopha sa lenane mme o shebelle ho fetoha ha sehlopha se sebetsang.
Ntlha ea 1
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Ntlha ea 2
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Ntlha ea 3
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
Ntlha ea 4
Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.
<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>
Tšebeliso
Ka litšobotsi tsa data
Ho eketsa habonolo boits'oaro ba scrollspy ho navigation ea topbar ea hau, eketsa nthong data-bs-spy="scroll"
eo u batlang ho e hloela (haholo-holo ena e tla ba eona <body>
). Ebe u eketsa data-bs-target
tšobotsi ka ID kapa sehlopha sa karolo ea motsoali ea karolo efe kapa efe ea 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>
Ka JavaScript
Kamora ho kenya position: relative;
CSS ea hau, letsetsa scrollspy ka JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Lipehelo tsa ID tse rarollehang lia hlokahala
Lihokelo tsa Navbar li tlameha ho ba le lipehelo tsa id tse rarollehang. Ka mohlala, e <a href="#home">home</a>
tlameha ho lumellana le ntho e 'ngoe e DOM e kang <div id="home"></div>
.
Likarolo tse sa bonahaleng tsa sepheo li hlokomolohuoe
Lintlha tse reriloeng tse sa bonahaleng li tla hlokomolohuoa 'me lintho tse tsamaisanang le tsona li ke ke tsa hlakisoa.
Mekhoa
khatholla
Ha o sebelisa scrollspy mmoho le ho eketsa kapa ho tlosa likarolo ho tsoa ho DOM, o tla hloka ho letsetsa mokhoa oa ho khatholla joalo ka:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
lahla
E senya scrollpy ea element. (E tlosa lintlha tse bolokiloeng karolong ea DOM)
getInstance
Mokhoa o tsitsitseng o u lumellang hore u fumane mohlala oa scrollspy o amanang le ntho ea DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Mokhoa o tsitsitseng o u lumellang hore u fumane mohlala oa scrollspy o amanang le ntho ea DOM, kapa u thehe e ncha haeba e sa qalisoa.
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Dikgetho
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-bs-
, joalo ka data-bs-offset=""
.
Lebitso | Mofuta | Ea kamehla | Tlhaloso |
---|---|---|---|
offset |
palo | 10 |
Lipikseli tsa ho theola ho tloha holimo ha ho baloa boemo ba ho tsamaisa. |
method |
khoele | auto |
E fumana hore na karolo ea spied e ho karolo efe. auto e tla khetha mokhoa o motle oa ho fumana likhokahano tsa meqolo. offset e tla sebelisa Element.getBoundingClientRect() mokhoa oa ho fumana likhokahano tsa moqolo. position e tla sebelisa HTMLElement.offsetTop le HTMLElement.offsetLeft thepa ho fumana likhokahano tsa moqolo. |
target |
khoele | ntho ea jQuery | Karolo ea DOM | E hlakisa ntho eo u ka e sebelisang ho sebelisa plugin ea Scrollspy. |
Liketsahalo
Mofuta oa ketsahalo | Tlhaloso |
---|---|
activate.bs.scrollspy |
Ketsahalo ena e sebetsa ho karolo ea moqolo neng kapa neng ha ntho e ncha e kengoa tšebetsong ke scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})