स्क्रोलस्पाय हें नांव
व्यूपोर्टांत सद्या खंयचो दुवो सक्रिय आसा तें दाखोवपाक स्क्रोल स्थितीचेर आदारीत बूटस्ट्रॅप नेव्हिगेशन वा यादी गट घटक आपसूक अद्ययावत करात.
कशें काम करता
Scrollspy योग्य रितीन काम करपाक कांय गरजां आसात:
- तो Bootstrap 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>
नेस्टेड नाव आशिल्लें उदाहरण
.navScrollspy नेस्टेड s कडेनय काम करता . एक नेस्टेड आसल्यार .navताचे पालकूय .activeआसतले .active. नवबाराच्या फुडल्या वाठारांत स्क्रोल करात आनी सक्रिय वर्ग बदलप पळयात.
आयटम 1
स्क्रोलस्पाय पानाखातीर ही कांय प्लेसहोल्डर सामुग्री आसा. लक्षांत दवरात की तुमी पान सकयल स्क्रोल करतना, योग्य नेव्हिगेशन दुवो हायलाइट जाता. तो पुराय घटक उदाहरणांत परतून परतून केला. स्क्रोलिंग आनी हायलाइट करपाचेर भर दिवपाक आमी हांगा आनीक कांय उदाहरण प्रत जोडत रावतात.
आयटम 1-1 हें नांव
स्क्रोलस्पाय पानाखातीर ही कांय प्लेसहोल्डर सामुग्री आसा. लक्षांत दवरात की तुमी पान सकयल स्क्रोल करतना, योग्य नेव्हिगेशन दुवो हायलाइट जाता. तो पुराय घटक उदाहरणांत परतून परतून केला. स्क्रोलिंग आनी हायलाइट करपाचेर भर दिवपाक आमी हांगा आनीक कांय उदाहरण प्रत जोडत रावतात.
आयटम 1-2 हें नांव
स्क्रोलस्पाय पानाखातीर ही कांय प्लेसहोल्डर सामुग्री आसा. लक्षांत दवरात की तुमी पान सकयल स्क्रोल करतना, योग्य नेव्हिगेशन दुवो हायलाइट जाता. तो पुराय घटक उदाहरणांत परतून परतून केला. स्क्रोलिंग आनी हायलाइट करपाचेर भर दिवपाक आमी हांगा आनीक कांय उदाहरण प्रत जोडत रावतात.
आयटम 2
स्क्रोलस्पाय पानाखातीर ही कांय प्लेसहोल्डर सामुग्री आसा. लक्षांत दवरात की तुमी पान सकयल स्क्रोल करतना, योग्य नेव्हिगेशन दुवो हायलाइट जाता. तो पुराय घटक उदाहरणांत परतून परतून केला. स्क्रोलिंग आनी हायलाइट करपाचेर भर दिवपाक आमी हांगा आनीक कांय उदाहरण प्रत जोडत रावतात.
आयटम 3. 1.1
स्क्रोलस्पाय पानाखातीर ही कांय प्लेसहोल्डर सामुग्री आसा. लक्षांत दवरात की तुमी पान सकयल स्क्रोल करतना, योग्य नेव्हिगेशन दुवो हायलाइट जाता. तो पुराय घटक उदाहरणांत परतून परतून केला. स्क्रोलिंग आनी हायलाइट करपाचेर भर दिवपाक आमी हांगा आनीक कांय उदाहरण प्रत जोडत रावतात.
आयटम 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>
यादी-गट आशिल्लें उदाहरण
स्क्रोलस्पाय s कडेनय काम करता .list-group. यादी गटाच्या फुडल्या वाठारांत स्क्रोल करात आनी सक्रिय वर्ग बदल पळयात.
आयटम 1
स्क्रोलस्पाय पानाखातीर ही कांय प्लेसहोल्डर सामुग्री आसा. लक्षांत दवरात की तुमी पान सकयल स्क्रोल करतना, योग्य नेव्हिगेशन दुवो हायलाइट जाता. तो पुराय घटक उदाहरणांत परतून परतून केला. स्क्रोलिंग आनी हायलाइट करपाचेर भर दिवपाक आमी हांगा आनीक कांय उदाहरण प्रत जोडत रावतात.
आयटम 2
स्क्रोलस्पाय पानाखातीर ही कांय प्लेसहोल्डर सामुग्री आसा. लक्षांत दवरात की तुमी पान सकयल स्क्रोल करतना, योग्य नेव्हिगेशन दुवो हायलाइट जाता. तो पुराय घटक उदाहरणांत परतून परतून केला. स्क्रोलिंग आनी हायलाइट करपाचेर भर दिवपाक आमी हांगा आनीक कांय उदाहरण प्रत जोडत रावतात.
आयटम 3. 1.1
स्क्रोलस्पाय पानाखातीर ही कांय प्लेसहोल्डर सामुग्री आसा. लक्षांत दवरात की तुमी पान सकयल स्क्रोल करतना, योग्य नेव्हिगेशन दुवो हायलाइट जाता. तो पुराय घटक उदाहरणांत परतून परतून केला. स्क्रोलिंग आनी हायलाइट करपाचेर भर दिवपाक आमी हांगा आनीक कांय उदाहरण प्रत जोडत रावतात.
आयटम ४
स्क्रोलस्पाय पानाखातीर ही कांय प्लेसहोल्डर सामुग्री आसा. लक्षांत दवरात की तुमी पान सकयल स्क्रोल करतना, योग्य नेव्हिगेशन दुवो हायलाइट जाता. तो पुराय घटक उदाहरणांत परतून परतून केला. स्क्रोलिंग आनी हायलाइट करपाचेर भर दिवपाक आमी हांगा आनीक कांय उदाहरण प्रत जोडत रावतात.
<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>
वापर
डेटा गुणधर्मां वरवीं
तुमच्या टॉपबार नेव्हिगेशनांत scrollspy वर्तन सहज जोडपाक, data-bs-spy="scroll"तुमकां गुप्तचर करपाक जाय आशिल्ल्या घटकांत जोडात (चड करून हें आसतलें <body>). मागीर data-bs-targetखंयच्याय Bootstrap घटकाच्या पालक घटकाच्या 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>
जावास्क्रिप्ट वरवीं
तुमच्या CSS मदीं जोडल्या उपरांत position: relative;, जावास्क्रिप्ट वरवीं स्क्रोलस्पायक कॉल करात:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
सोडोवपाक येवपी आयडी लक्ष्यांची गरज आसा
नवबार दुव्यांक सोडोवपाक येवपी id लक्ष्य आसपाक जाय. देखीक, a <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 घटकाकडेन संबंदीत आशिल्ली scrollspy दृष्टांत मेळोवपाक परवानगी दिता, वा ती आरंभ करूंक नाशिल्ल्या प्रकरणांत नवी तयार करपाक परवानगी दिता
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वापरतले . स्क्रोल निर्देशांक मेळोवपाखातीर and गुणधर्म वापरतले .Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft |
target |
तार | jQuery वस्तू | DOM घटक | Scrollspy प्लगइन लागू करपाक घटक निर्देशीत करता. |
घडणुको
| इव्हेंट प्रकार | वर्णन |
|---|---|
activate.bs.scrollspy |
जेन्ना केन्नाय स्क्रोलस्पाय कडल्यान नवी वस्त सक्रिय जाता तेन्ना ही घडणूक स्क्रोल घटकाचेर फायर करता. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})