स्क्रॉलस्पाई
स्क्रॉल स्थिति के आधार पर बूटस्ट्रैप नेविगेशन या सूची समूह घटकों को स्वचालित रूप से अपडेट करें ताकि यह इंगित किया जा सके कि वर्तमान में व्यूपोर्ट में कौन सा लिंक सक्रिय है।
यह काम किस प्रकार करता है
ठीक से काम करने के लिए स्क्रॉलस्पी की कुछ आवश्यकताएं हैं:
- इसका उपयोग बूटस्ट्रैप एनएवी घटक या सूची समूह पर किया जाना चाहिए ।
- स्क्रॉलस्पी को
position: relative;उस तत्व की आवश्यकता होती है जिस पर आप जासूसी कर रहे हैं, आमतौर पर<body>. - एंकर (
<a>) आवश्यक हैं और उस तत्व को इंगित करना चाहिएid।
सफलतापूर्वक कार्यान्वित होने पर, आपकी नौसेना या सूची समूह तदनुसार अपडेट हो जाएगा, .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 href="#home">home</a>डोम में किसी चीज़ के अनुरूप होना चाहिए जैसे <div id="home"></div>.
अदृश्य लक्ष्य तत्वों पर ध्यान नहीं दिया गया
दिखाई नहीं देने वाले लक्ष्य तत्वों को अनदेखा कर दिया जाएगा और उनके संबंधित नेविगेशन आइटम को कभी भी हाइलाइट नहीं किया जाएगा।
तरीकों
ताज़ा करना
डीओएम से तत्वों को जोड़ने या हटाने के संयोजन के साथ स्क्रॉलस्पी का उपयोग करते समय, आपको रीफ्रेश विधि को इस तरह कॉल करना होगा:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
निपटाने
किसी तत्व के स्क्रॉल को नष्ट कर देता है। (डीओएम तत्व पर संग्रहीत डेटा हटा देता है)
दृष्टांत लो
स्टेटिक विधि जो आपको DOM तत्व से जुड़े स्क्रॉलस्पी इंस्टेंस प्राप्त करने की अनुमति देती है
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 वस्तु | डोम तत्व | स्क्रॉलस्पी प्लगइन लागू करने के लिए तत्व निर्दिष्ट करता है। |
आयोजन
| घटना प्रकार | विवरण |
|---|---|
activate.bs.scrollspy |
यह घटना स्क्रॉल तत्व पर सक्रिय होती है जब भी कोई नया आइटम स्क्रॉलस्पी द्वारा सक्रिय हो जाता है। |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})