स्क्रॉलस्पाई के बा
स्क्रॉल पोजीशन के आधार पर बूटस्ट्रैप नेविगेशन या लिस्ट ग्रुप कंपोनेंट सभ के स्वचालित रूप से अपडेट करीं ताकि ई बतावल जा सके कि व्यूपोर्ट में वर्तमान में कवन लिंक सक्रिय बा।
कइसे काम करेला
स्क्रॉलस्पाई के ठीक से काम करे खातिर कुछ जरूरत बा:
- एकर इस्तेमाल कवनो बूटस्ट्रैप nav घटक या सूची समूह पर होखे के चाहीं .
- स्क्रॉलस्पाई के जरूरत
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>
जावास्क्रिप्ट के माध्यम से कइल जाला
अपना सीएसएस में जोड़ला के बाद 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 |
तार के बा | जेक्वेरी ऑब्जेक्ट के बा | डोम तत्व के बा | स्क्रॉलस्पाई प्लगइन लागू करे खातिर तत्व निर्दिष्ट करे ला। |
घटनाक्रम के बारे में बतावल गइल बा
| घटना के प्रकार बा | बिबरन |
|---|---|
activate.bs.scrollspy |
ई इवेंट स्क्रॉल तत्व पर तब भी फायर करे ला जब भी स्क्रॉलस्पी द्वारा कौनों नया आइटम सक्रिय हो जाला। |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})