Scrollspy
නැරඹුම් තොටේ දැනට ක්‍රියාත්මක වන්නේ කුමන සබැඳියද යන්න දැක්වීමට අනුචලන ස්ථානය මත පදනම්ව Bootstrap සංචාලනය හෝ ලැයිස්තු කණ්ඩායම් සංරචක ස්වයංක්‍රීයව යාවත්කාලීන කරන්න.
එය ක්රියා කරන ආකාරය
Scrollspy නිවැරදිව ක්‍රියාත්මක වීමට අවශ්‍යතා කිහිපයක් ඇත:
- එය Bootstrap nav සංරචකයක් හෝ ලැයිස්තු කණ්ඩායමක් මත භාවිතා කළ යුතුය .
- Scrollspy සඳහා
position: relative;ඔබ ඔත්තු බලන මූලද්‍රව්‍යය අවශ්‍ය වේ, සාමාන්‍යයෙන්<body>. - නැංගුරම් (
<a>) අවශ්‍ය වන අතර එය සහිත මූලද්‍රව්‍යයක් වෙත යොමු කළ යුතුයid.
සාර්ථකව ක්‍රියාත්මක කළ විට, ඔබේ nav හෝ ලැයිස්තු කණ්ඩායම ඒ අනුව යාවත්කාලීන වනු ඇත, .activeඔවුන්ගේ ආශ්‍රිත ඉලක්ක මත පදනම්ව පන්තිය එක් අයිතමයකින් ඊළඟට ගෙන යයි.
අනුචලනය කළ හැකි බහාලුම් සහ යතුරුපුවරු ප්රවේශය
ඔබ අනුචලනය කළ හැකි බහාලුමක් සාදන්නේ නම් (වෙනත් ඒවා හැර <body>), යතුරුපුවරු ප්රවේශය සහතික කිරීම සඳහා a සමඟින් heightකට්ටලයක් තබා එයට යෙදීමට වග බලා ගන්න.overflow-y: scroll;tabindex="0"
navbar හි උදාහරණය
නව තීරුවට පහළින් ප්‍රදේශය අනුචලනය කර සක්‍රිය පන්ති වෙනස නරඹන්න. පතන අයිතම ද උද්දීපනය කෙරේ.
පළමු මාතෘකාව
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
දෙවන මාතෘකාව
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
තුන්වන මාතෘකාව
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
හතරවන මාතෘකාව
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
පස්වන මාතෘකාව
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
<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>
කැදැලි nav සමඟ උදාහරණය
Scrollspy ද nested .navs සමඟ ක්රියා කරයි. කැදැල්ලක් .navනම් .active, එහි දෙමාපියන් ද වනු ඇත .active. navbar එක අසල ඇති ප්‍රදේශය අනුචලනය කර ක්‍රියාකාරී පන්තියේ වෙනස නරඹන්න.
අයිතමය 1
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
අයිතමය 1-1
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
අයිතමය 1-2
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
අයිතමය 2
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
අයිතමය 3
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
අයිතමය 3-1
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
අයිතමය 3-2
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
<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>
ලැයිස්තු-කණ්ඩායම සමඟ උදාහරණයක්
Scrollspy ද .list-groups සමඟ ක්රියා කරයි. ලැයිස්තු කණ්ඩායමට යාබද ප්‍රදේශය අනුචලනය කර සක්‍රිය පන්ති වෙනස නරඹන්න.
අයිතමය 1
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
අයිතමය 2
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
අයිතමය 3
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
අයිතමය 4
මෙය scrollspy පිටුව සඳහා තැන් දරණ අන්තර්ගතයකි. ඔබ පිටුව පහළට අනුචලනය කරන විට, සුදුසු සංචාලන සබැඳිය උද්දීපනය වන බව සලකන්න. සංරචක උදාහරණය පුරාම එය නැවත නැවතත් සිදු වේ. අනුචලනය සහ උද්දීපනය අවධාරණය කිරීම සඳහා අපි තවත් උදාහරණ පිටපතක් මෙහි එකතු කරමු.
<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>
භාවිතය
දත්ත ගුණාංග හරහා
ඔබගේ topbar සංචලනය වෙත පහසුවෙන් scrollspy හැසිරීම එක් data-bs-spy="scroll"කිරීමට, ඔබට ඔත්තු බැලීමට අවශ්‍ය මූලද්‍රව්‍යයට එක් කරන්න (බොහෝ විට මෙය වනු ඇත <body>). ඉන්පසු ඕනෑම Bootstrap සංරචකයක data-bs-targetමව් මූලද්‍රව්‍යයේ ID හෝ පන්තිය සමඟ ගුණාංගය එක් කරන්න..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>
JavaScript හරහා
ඔබේ CSS එකතු කිරීමෙන් පසු position: relative;, JavaScript හරහා scrollspy අමතන්න:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
විසඳිය හැකි ID ඉලක්ක අවශ්‍යයි
Navbar සබැඳිවලට විසඳිය හැකි id ඉලක්ක තිබිය යුතුය. උදාහරණයක් ලෙස, <a href="#home">home</a>DOM වැනි දෙයකට අනුරූප විය යුතුය <div id="home"></div>.
දෘශ්‍ය නොවන ඉලක්ක මූලද්‍රව්‍ය නොසලකා හරින ලදී
දෘශ්‍යමාන නොවන ඉලක්ක මූලද්‍රව්‍ය නොසලකා හරිනු ඇති අතර ඒවායේ අනුරූප nav අයිතම කිසි විටෙකත් උද්දීපනය නොකෙරේ.
ක්රම
නැවුම් කරන්න
DOM වෙතින් මූලද්‍රව්‍ය එකතු කිරීම හෝ ඉවත් කිරීම සමඟ සම්බන්ධව scrollspy භාවිතා කරන විට, ඔබට එවැනි නැවුම් කිරීමේ ක්‍රමය ඇමතීමට අවශ්‍ය වනු ඇත:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
බැහැර කරන්න
මූලද්‍රව්‍යයක අනුචලනය විනාශ කරයි. (DOM මූලද්‍රව්‍යයේ ගබඩා කර ඇති දත්ත ඉවත් කරයි)
getInstance
DOM මූලද්‍රව්‍යයක් සමඟ සම්බන්ධ වූ scrollspy අවස්ථාව ලබා ගැනීමට ඔබට ඉඩ සලසන ස්ථිතික ක්‍රමය
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
DOM මූලද්‍රව්‍යයක් සමඟ සම්බන්ධ වූ ස්ක්‍රොල්ස්පයි අවස්ථාව ලබා ගැනීමට හෝ එය ආරම්භ නොකළහොත් නව එකක් සෑදීමට ඔබට ඉඩ සලසන ස්ථිතික ක්‍රමය
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
විකල්ප
දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-bs-, ලෙසට එකතු කරන්න data-bs-offset="".
| නම | ටයිප් කරන්න | පෙරනිමිය | විස්තර |
|---|---|---|---|
offset |
අංකය | 10 |
අනුචලනයේ පිහිටීම ගණනය කිරීමේදී ඉහළින් ඕෆ්සෙට් කිරීමට පික්සල. |
method |
නූල් | auto |
ඔත්තු කරන ලද මූලද්‍රව්‍යය කුමන කොටසේ දැයි සොයා ගනී. autoඅනුචලන ඛණ්ඩාංක ලබා ගැනීමට හොඳම ක්‍රමය තෝරා ගනු ඇත. අනුචලන ඛණ්ඩාංක ලබා ගැනීමට ක්‍රමය offsetභාවිතා කරනු ඇත . අනුචලන ඛණ්ඩාංක ලබා ගැනීමට සහ ගුණාංග භාවිතා කරනු ඇත .Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft |
target |
තන්තුව | jQuery වස්තුව | DOM මූලද්‍රව්‍යය | Scrollspy ප්ලගිනය යෙදීමට මූලාංගය නියම කරයි. |
සිදුවීම්
| සිදුවීම් වර්ගය | විස්තර |
|---|---|
activate.bs.scrollspy |
මෙම සිදුවීම scrollspy විසින් නව අයිතමයක් සක්‍රිය වන සෑම විටම අනුචලන මූලද්‍රව්‍යය මත වෙඩි තබයි. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})