Scrollspy
Fa'afou otometi le Bootstrap navigation po'o le lisi o vaega vaega e fa'atatau i le tulaga ta'ai e fa'ailoa ai po'o fea so'otaga o lo'o galue i le va'aiga.
E faapefea ona galue
Scrollspy ei ai ni nai mana'oga e galue lelei:
- E tatau ona fa'aogaina i luga o se vaega Bootstrap nav po'o se vaega lisi .
- Scrollspy e manaʻomia
position: relative;
le elemene o loʻo e vaʻavaʻai i ai, e masani lava o le<body>
. - O taula (
<a>
) e mana'omia ma e tatau ona faasino i se elemene o lo'o iai lenaid
.
A manuia le fa'atinoina, o lau nav po'o le lisi o vaega o le a fa'afouina e tusa ai, ma fa'agasolo le .active
vasega mai le tasi mea i le isi e fa'atatau i a latou fa'atatauga.
Koneteina e mafai ona su'e ma avanoa i le keyboard
Afai o lo'o e faia se atigipusa e mafai ona ta'ai (e ese mai i le <body>
), ia mautinoa e iai se height
seti ma overflow-y: scroll;
fa'aoga i ai—fa'atasi ai ma le tabindex="0"
fa'amautu le avanoa o le keyboard.
Faataitaiga i le navbar
Fa'asolo le vaega i lalo o le navbar ma matamata le suiga o le vasega. O mea e pa'u i lalo o le a fa'ailogaina fo'i.
Uluai ulutala
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Ulutala lona lua
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Ulutala lona tolu
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Ulutala lona fa
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Ulutala lona lima
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
<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>
Fa'aa'oa'oga fa'atasi ma fa'anofo nav
E galue fo'i Scrollspy i fa'aputuga .nav
s. Afai o se faamoega , .nav
e .active
faapena foi ona matua .active
. Fa'asolo le vaega i tafatafa o le navbar ma matamata le suiga o le vasega.
Aitema 1
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Aitema 1-1
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Aitema 1-2
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Aitema 2
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Aitema 3
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Aitema 3-1
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Aitema 3-2
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
<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>
Faataitaiga ma lisi-vaega
E galue foi Scrollspy ma .list-group
s. Fa'asolo le vaega i talaane o le vaega o le lisi ma matamata le suiga o le vasega.
Aitema 1
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Aitema 2
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Aitema 3
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
Aitema 4
O nisi nei o mea o lo'o i totonu mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailogaina le so'oga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.
<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>
Fa'aoga
E ala i fa'amaumauga uiga
Ina ia fa'afaigofie ona fa'aopoopo le amio ta'avale i lau ta'avale pito i luga, fa'aopoopo data-bs-spy="scroll"
i le elemene e te mana'o e sipai ai (e masani lava o le <body>
). Ona faʻaopoopo lea o le data-bs-target
uiga faʻatasi ma le ID poʻo le vasega o le matua elemene o soʻo se .nav
vaega 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>
E ala i le JavaScript
A uma ona faʻaopoopo position: relative;
i lau CSS, valaʻau le scrollspy e ala i le JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
E mana'omia ni fa'ailoga ID e mafai ona fo'ia
O feso'ota'iga Navbar e tatau ona i ai ni fa'ailoga id e mafai ona fo'ia. Mo se faʻataʻitaʻiga, e <a href="#home">home</a>
tatau ona fetaui ma se mea i le DOM pei <div id="home"></div>
.
O elemene fa'amoemoe e le o va'aia ua le amana'ia
O elemene fa'amoemoe e le o va'aia o le a le amana'ia ma o latou mea fa'atatau nav o le a le fa'ailoaina lava.
Metotia
faafou
A faʻaaoga le scrollspy faʻatasi ma le faʻaopoopoina poʻo le aveesea o elemene mai le DOM, e tatau ona e valaʻau le auala faʻafouina e pei o lea:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
lafoa'i
Fa'aleagaina le ta'avale a se elemene. (Ave'ese fa'amaumauga o lo'o teuina ile elemene DOM)
getInstance
Metotia static lea e mafai ai e oe ona maua le scrollspy faʻataʻitaʻiga e fesoʻotaʻi ma se elemene DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Metotia static e mafai ai e oe ona maua le scrollspy faʻataʻitaʻiga e fesoʻotaʻi ma se elemene DOM, pe fatuina se mea fou pe a leʻi amataina.
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Filifiliga
O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-bs-
, pei o le data-bs-offset=""
.
Igoa | Ituaiga | Fa'atonu | Fa'amatalaga |
---|---|---|---|
offset |
numera | 10 |
Pixels e fa'asolo mai luga pe a fa'atatau le tulaga o le ta'ai. |
method |
manoa | auto |
Su'e po'o fea vaega o lo'o i ai le elemene spied. auto o le a filifili le auala sili e maua ai fa'asologa ta'ai. offset o le a faʻaogaina le Element.getBoundingClientRect() auala e maua ai faʻamaumauga taʻavale. position o le a fa'aogaina le HTMLElement.offsetTop ma HTMLElement.offsetLeft meatotino e maua ai fa'amaopoopo tusi. |
target |
manoa | jQuery mea | DOM elemene | Fa'amaoti elemene e fa'aoga ai le Scrollspy plugin. |
Mea na tutupu
Ituaiga mea na tupu | Fa'amatalaga |
---|---|
activate.bs.scrollspy |
O lenei mea na tupu e mu i luga o le elemene taʻavale i soo se taimi e faʻagaoioia ai se mea fou e le scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})