स्क्रॉलस्पाई
स्क्रॉल स्थिति कें आधार पर बूटस्ट्रैप नेविगेशन या सूची समूह घटक कें स्वचालित रूप सं अपडेट करूं ताकि इ इंगित कैल जा सकय कि व्यूपोर्ट मे वर्तमान मे कोन लिंक सक्रिय छै.
कोना काज करैत अछि
स्क्रॉलस्पाई कें सही ढंग सं काज करय कें लेल किछु आवश्यकता छै:
- एकर उपयोग बूटस्ट्रैप nav घटक अथवा सूची समूह पर करबाक चाही .
- Scrollspy
position: relative;तत्व पर आवश्यकता अछि जकरा अहाँ जासूसी क रहल छी, आमतौर पर<body>. - एंकर (
<a>) आवश्यक अछि आ ओकरा संग कोनो तत्व दिस इशारा करबाक चाहीid.
सफलतापूर्वक लागू करय पर, अहां कें nav या सूची समूह तदनुसार अपडेट करतय, .activeओकर संबद्ध लक्ष्य कें आधार पर वर्ग कें एकटा आइटम सं दोसर आइटम मे स्थानांतरित करयत.
स्क्रॉल करय योग्य कंटेनर आ कीबोर्ड पहुँच
यदि अहां स्क्रॉल करय योग्य कंटेनर (क अलावा <body>) बना रहल छी, त एकटा heightसेट सुनिश्चित करूं आ overflow-y: scroll;ओकरा पर लागू करूं- tabindex="0"कीबोर्ड कें पहुंच सुनिश्चित करय कें लेल a कें साथ-साथ.
नवबार में उदाहरण
नवबार के नीचा के क्षेत्र के स्क्रॉल करू आ सक्रिय वर्ग बदलैत देखू. ड्रॉपडाउन आइटम सेहो हाइलाइट कएल जाएत।
प्रथम शीर्षक
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
दोसर शीर्षक
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
तेसर शीर्षक
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
चौथा शीर्षक
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
पाँचम शीर्षक
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
<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एस के साथ सेहो काज करैत अछि. जँ कोनो नेस्टेड .navअछि .activeतँ ओकर माता - पिता सेहो हेताह .active| नवबार के बगल के क्षेत्र स्क्रॉल करू आ सक्रिय वर्ग बदलैत देखू.
मद 1
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
मद 1-1 के अनुसार
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
मद 1-2 के अनुसार
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
मद 2
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
मद 3
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
मद 3-1 के अनुसार
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
मद 3-2 के अनुसार
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
<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>
सूची-समूह के साथ उदाहरण
स्क्रॉलस्पी .list-groupएस के साथ सेहो काज करैत अछि। सूची समूह कें बगल कें क्षेत्र स्क्रॉल करूं आ सक्रिय वर्ग परिवर्तन देखूं.
मद 1
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
मद 2
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
मद 3
ई स्क्रॉलस्पी पृष्ठ के लेल किछ प्लेसहोल्डर सामग्री अछि. ध्यान रहे कि जेना-जेना पन्ना के नीचे स्क्रॉल करलऽ जाय छै, उचित नेविगेशन लिंक हाइलाइट होय जाय छै. एकरा पूरा घटक उदाहरण मे दोहराओल गेल अछि। हम एतय किछु आओर उदाहरण प्रतिलिपि जोड़ैत रहैत छी जाहि सं स्क्रॉल आ हाइलाइटिंग पर जोर देल जा सकय.
मद 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 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>
प्रयोग
डेटा विशेषता के माध्यम से
अपनऽ टॉपबार नेविगेशन म॑ स्क्रॉलस्पी व्यवहार क॑ आसानी स॑ जोड़ै लेली, data-bs-spy="scroll"वू तत्व म॑ जोड़ऽ जेकरा प॑ आप जासूसी करना चाहै छियै (सबसे आम तौर प॑ ई होतै <body>). तखन कोनों बूटस्ट्रैप घटक कें data-bs-targetमूल तत्व कें आईडी या वर्ग कें साथ विशेषता कें जोड़ूं..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>
जावास्क्रिप्ट के माध्यम से
अपन CSS मे जोड़लाक बाद position: relative;जावास्क्रिप्ट क माध्यम स स्क्रॉलस्पाई कए कॉल करू:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
समाधान योग्य आईडी लक्ष्य आवश्यक अछि
नवबार लिंक मे हल करय योग्य आईडी टारगेट होबाक चाही. जेना, a <a href="#home">home</a>डीओएम मे किछु एहन सँ मेल खाएब आवश्यक अछि जेना <div id="home"></div>.
गैर-दृश्य लक्ष्य तत्व अनदेखी
लक्ष्य तत्व जे देखबा मे नहि आबि रहल अछि ओकरा अनदेखी कएल जाएत आओर ओकर संगत नव आइटम कहियो हाइलाइट नहि कएल जाएत.
विधियाँ
ताज़ा करब
DOM स तत्व जोड़ै या हटाबै के साथ scrollspy क उपयोग करला पर, आहाँ क रिफ्रेश विधि क ऐन्हऽ कॉल करै के जरूरत होतै:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
निपटान करब
कोनो तत्व के स्क्रॉलस्पी के नष्ट करैत अछि. (DOM तत्व पर संग्रहीत डेटा हटाबैत अछि)
getInstance
स्थिर विधि जे अहां कें कोनों डॉम तत्व सं जुड़ल स्क्रॉलस्पी इंस्टेंस प्राप्त करय कें अनुमति देयत छै
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
विकल्प
विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-bs-, मे संलग्न करू , जेना data-bs-offset="".
| नाम | प्रकार | चुकनाइ | वर्णन |
|---|---|---|---|
offset |
संख्या | 10 |
स्क्रॉल के स्थिति की गणना करते समय ऊपर से ऑफसेट करने के लिये पिक्सेल | |
method |
डोरी | auto |
पता लगाबैत अछि जे जासूसी तत्व कोन खंड मे अछि autoस्क्रॉल निर्देशांक प्राप्त करबाक लेल सर्वोत्तम तरीका चुनत. स्क्रॉल निर्देशांक प्राप्त करबाक लेल विधिक offsetउपयोग करत । स्क्रॉल निर्देशांक प्राप्त करबाक लेल आओर गुण क उपयोग करत .Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft |
target |
तार | jQuery वस्तु | डोम तत्व | Scrollspy प्लगइन लागू करबाक लेल तत्व निर्दिष्ट करैत अछि. |
घटनाक्रम
| घटना प्रकार | वर्णन |
|---|---|
activate.bs.scrollspy |
ई घटना स्क्रॉल तत्व पर फायर करय छै जब भी कोनों नया आइटम स्क्रॉलस्पी द्वारा सक्रिय होय जाय छै. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})