Scrollspy
व्ह्यूपोर्टमध्ये सध्या कोणता दुवा सक्रिय आहे हे सूचित करण्यासाठी स्क्रोल स्थितीवर आधारित बूटस्ट्रॅप नेव्हिगेशन किंवा सूची गट घटक स्वयंचलितपणे अद्यतनित करा.
हे कसे कार्य करते
जेव्हा अँकरच्या संदर्भातील घटक दृश्यात स्क्रोल केला जातो तेव्हा Scrollspy .activeअँकर ( ) घटकांवर वर्ग टॉगल करते. Scrollspy चा वापर बूटस्ट्रॅप एनएव्ही घटक किंवा सूची गटाच्या संयोगाने केला जातो , परंतु ते वर्तमान पृष्ठावरील कोणत्याही अँकर घटकांसह देखील कार्य करेल. ते कसे कार्य करते ते येथे आहे.<a>idhref
-
सुरू करण्यासाठी, scrollspy ला दोन गोष्टींची आवश्यकता आहे: एक नेव्हिगेशन, सूची गट, किंवा दुव्यांचा एक साधा संच, तसेच स्क्रोल करण्यायोग्य कंटेनर. स्क्रोल करता येण्याजोगा कंटेनर
<body>हा सेटheightआणि सानुकूल घटक असू शकतोoverflow-y: scroll. -
स्क्रोल करण्यायोग्य कंटेनरवर, जोडा
data-bs-spy="scroll"आणि संबंधित नेव्हिगेशनचे अद्वितीयdata-bs-target="#navId"कोठे आहे. कीबोर्ड प्रवेश सुनिश्चित करण्यासाठी एक देखील समाविष्ट करण्याचे सुनिश्चित करा.navIdidtabindex="0" -
तुम्ही “स्पाईड” कंटेनर स्क्रोल करताच,
.activeसंबंधित नेव्हिगेशनमधील अँकर लिंकमधून वर्ग जोडला जातो आणि काढून टाकला जातो. दुव्यांमध्ये निराकरण करण्यायोग्यidलक्ष्य असणे आवश्यक आहे, अन्यथा त्याकडे दुर्लक्ष केले जाईल. उदाहरणार्थ,<a href="#home">home</a>DOM मधील एखाद्या गोष्टीशी सुसंगत असणे आवश्यक आहे<div id="home"></div> -
न दिसणारे लक्ष्य घटक दुर्लक्षित केले जातील. खाली न दिसणारे घटक विभाग पहा .
उदाहरणे
नवबार
navbar खालील क्षेत्र स्क्रोल करा आणि सक्रिय वर्ग बदल पहा. ड्रॉपडाउन मेनू उघडा आणि ड्रॉपडाउन आयटम देखील हायलाइट केलेले पहा.
प्रथम शीर्षक
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
दुसरे शीर्षक
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
तिसरे शीर्षक
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
चौथे शीर्षक
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
पाचवे शीर्षक
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
<nav id="navbar-example2" class="navbar bg-light px-3 mb-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-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" 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 नेस्टेड .navs सह देखील कार्य करते. जर घरटे असेल तर .navत्याचे .activeपालक देखील असतील .active. नवबारच्या पुढील भागात स्क्रोल करा आणि सक्रिय वर्ग बदल पहा.
आयटम 1
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
लक्षात ठेवा की JavaScript प्लगइन दृश्यमान असलेल्या सर्वांमधून योग्य घटक निवडण्याचा प्रयत्न करते. एकाच वेळी अनेक दृश्यमान स्क्रोलस्पाय लक्ष्यांमुळे काही समस्या उद्भवू शकतात.
आयटम 1-1
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
लक्षात ठेवा की JavaScript प्लगइन दृश्यमान असलेल्या सर्वांमधून योग्य घटक निवडण्याचा प्रयत्न करते. एकाच वेळी अनेक दृश्यमान स्क्रोलस्पाय लक्ष्यांमुळे काही समस्या उद्भवू शकतात.
आयटम 1-2
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
लक्षात ठेवा की JavaScript प्लगइन दृश्यमान असलेल्या सर्वांमधून योग्य घटक निवडण्याचा प्रयत्न करते. एकाच वेळी अनेक दृश्यमान स्क्रोलस्पाय लक्ष्यांमुळे काही समस्या उद्भवू शकतात.
आयटम 2
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
लक्षात ठेवा की JavaScript प्लगइन दृश्यमान असलेल्या सर्वांमधून योग्य घटक निवडण्याचा प्रयत्न करते. एकाच वेळी अनेक दृश्यमान स्क्रोलस्पाय लक्ष्यांमुळे काही समस्या उद्भवू शकतात.
आयटम 3
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
लक्षात ठेवा की JavaScript प्लगइन दृश्यमान असलेल्या सर्वांमधून योग्य घटक निवडण्याचा प्रयत्न करते. एकाच वेळी अनेक दृश्यमान स्क्रोलस्पाय लक्ष्यांमुळे काही समस्या उद्भवू शकतात.
आयटम 3-1
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
लक्षात ठेवा की JavaScript प्लगइन दृश्यमान असलेल्या सर्वांमधून योग्य घटक निवडण्याचा प्रयत्न करते. एकाच वेळी अनेक दृश्यमान स्क्रोलस्पाय लक्ष्यांमुळे काही समस्या उद्भवू शकतात.
आयटम 3-2
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
लक्षात ठेवा की JavaScript प्लगइन दृश्यमान असलेल्या सर्वांमधून योग्य घटक निवडण्याचा प्रयत्न करते. एकाच वेळी अनेक दृश्यमान स्क्रोलस्पाय लक्ष्यांमुळे काही समस्या उद्भवू शकतात.
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
<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>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="item-1">
<h4>Item 1</h4>
<p>...</p>
</div>
<div id="item-1-1">
<h5>Item 1-1</h5>
<p>...</p>
</div>
<div id="item-1-2">
<h5>Item 1-2</h5>
<p>...</p>
</div>
<div id="item-2">
<h4>Item 2</h4>
<p>...</p>
</div>
<div id="item-3">
<h4>Item 3</h4>
<p>...</p>
</div>
<div id="item-3-1">
<h5>Item 3-1</h5>
<p>...</p>
</div>
<div id="item-3-2">
<h5>Item 3-2</h5>
<p>...</p>
</div>
</div>
</div>
</div>
यादी गट
Scrollspy देखील .list-groups सह कार्य करते. सूची गटाच्या पुढील भागात स्क्रोल करा आणि सक्रिय वर्ग बदल पहा.
आयटम 1
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
आयटम 2
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
आयटम 3
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
आयटम 4
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
<div class="row">
<div class="col-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>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" 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>
</div>
</div>
साधे अँकर
Scrollspy हे एनएव्ही घटक आणि सूची गटांपुरते मर्यादित नाही, त्यामुळे ते <a>वर्तमान दस्तऐवजातील कोणत्याही अँकर घटकांवर कार्य करेल. क्षेत्र स्क्रोल करा आणि .activeवर्ग बदल पहा.
आयटम 1
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
आयटम 2
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
आयटम 3
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
आयटम 4
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
आयटम 5
स्क्रोलस्पाय पृष्ठासाठी ही काही प्लेसहोल्डर सामग्री आहे. लक्षात ठेवा की तुम्ही पृष्ठ खाली स्क्रोल करताच, योग्य नेव्हिगेशन लिंक हायलाइट होईल. हे संपूर्ण घटक उदाहरणामध्ये पुनरावृत्ती होते. स्क्रोलिंग आणि हायलाइटिंगवर जोर देण्यासाठी आम्ही येथे आणखी काही उदाहरण कॉपी जोडत आहोत.
<div class="row">
<div class="col-4">
<div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
<a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
<a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
<a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
<a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
<a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
<h4 id="simple-list-item-1">Item 1</h4>
<p>...</p>
<h4 id="simple-list-item-2">Item 2</h4>
<p>...</p>
<h4 id="simple-list-item-3">Item 3</h4>
<p>...</p>
<h4 id="simple-list-item-4">Item 4</h4>
<p>...</p>
<h4 id="simple-list-item-5">Item 5</h4>
<p>...</p>
</div>
</div>
</div>
न दिसणारे घटक
दृश्यमान नसलेले लक्ष्य घटक दुर्लक्षित केले जातील आणि त्यांच्या संबंधित एनएव्ही आयटमना .activeवर्ग मिळणार नाही. न दिसणार्‍या रॅपरमध्ये सुरू केलेली स्क्रोलस्पाय उदाहरणे सर्व लक्ष्य घटकांकडे दुर्लक्ष करतील. refreshएकदा रॅपर दृश्यमान झाल्यावर निरीक्षण करण्यायोग्य घटक तपासण्यासाठी पद्धत वापरा .
document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
el.addEventListener('shown.bs.tab', () => {
const target = el.getAttribute('data-bs-target')
const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
})
})
वापर
डेटा विशेषतांद्वारे
तुमच्या टॉपबार नेव्हिगेशनमध्ये सहजपणे स्क्रोलस्पाय वर्तन जोडण्यासाठी, data-bs-spy="scroll"तुम्ही ज्या घटकावर टेहळणी करू इच्छिता त्यात जोडा (बहुधा हे असेल <body>). नंतर कोणत्याही बूटस्ट्रॅप घटकाच्या मूळ घटकाच्या किंवा वर्गाच्या नावासह data-bs-targetविशेषता जोडा .id.nav
<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 द्वारे
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
पर्याय
data-bs-पर्याय डेटा विशेषता किंवा JavaScript द्वारे पास केले जाऊ शकतात म्हणून, तुम्ही मध्ये पर्याय नाव जोडू शकता data-bs-animation="{value}". डेटा विशेषतांद्वारे पर्याय पास करताना पर्याय नावाचा केस प्रकार “ camelCase ” वरून “ kebab-case ” मध्ये बदलण्याची खात्री करा. उदाहरणार्थ, data-bs-custom-class="beautifier"ऐवजी वापरा data-bs-customClass="beautifier".
बूटस्ट्रॅप 5.2.0 नुसार, सर्व घटक प्रायोगिक आरक्षित डेटा विशेषताचे समर्थन data-bs-configकरतात जे JSON स्ट्रिंग म्हणून साधे घटक कॉन्फिगरेशन ठेवू शकतात. जेव्हा एखाद्या घटकामध्ये data-bs-config='{"delay":0, "title":123}'आणि data-bs-title="456"गुणधर्म असतात, तेव्हा अंतिम titleमूल्य असेल 456आणि स्वतंत्र डेटा विशेषता वर दिलेल्या मूल्यांना ओव्हरराइड करतील data-bs-config. याव्यतिरिक्त, विद्यमान डेटा विशेषता जसे की JSON मूल्य ठेवण्यास सक्षम आहेत data-bs-delay='{"show":0,"hide":150}'.
| नाव | प्रकार | डीफॉल्ट | वर्णन |
|---|---|---|---|
rootMargin |
स्ट्रिंग | 0px 0px -25% |
छेदनबिंदू निरीक्षक रूटमार्जिन वैध एकके, स्क्रोल स्थितीची गणना करताना. |
smoothScroll |
बुलियन | false |
जेव्हा वापरकर्ता ScrollSpy निरीक्षण करण्यायोग्य लिंकवर क्लिक करतो तेव्हा गुळगुळीत स्क्रोलिंग सक्षम करते. |
target |
स्ट्रिंग, DOM घटक | null |
Scrollspy प्लगइन लागू करण्यासाठी घटक निर्दिष्ट करते. |
threshold |
रचना | [0.1, 0.5, 1] |
IntersectionObserver स्क्रोल स्थितीची गणना करताना थ्रेशोल्ड वैध इनपुट. |
नापसंत पर्याय
v5.1.3 पर्यंत आम्ही offset& methodपर्याय वापरत होतो, जे आता बहिष्कृत झाले आहेत आणि द्वारे बदलले आहेत rootMargin. बॅकवर्ड कंपॅटिबिलिटी ठेवण्यासाठी, आम्ही दिलेले विश्लेषित करणे सुरू ठेवू offset, परंतु हे वैशिष्ट्य v6rootMargin मध्ये काढले जाईल .
पद्धती
| पद्धत | वर्णन |
|---|---|
dispose |
घटकाची स्क्रोलस्पाय नष्ट करते. (DOM घटकावरील संचयित डेटा काढून टाकते) |
getInstance |
DOM घटकाशी संबंधित scrollspy उदाहरण मिळविण्यासाठी स्थिर पद्धत. |
getOrCreateInstance |
डीओएम घटकाशी संबंधित स्क्रोलस्पाय उदाहरण मिळविण्यासाठी किंवा प्रारंभ न झाल्यास नवीन तयार करण्यासाठी स्थिर पद्धत. |
refresh |
DOM मध्ये घटक जोडताना किंवा काढताना, तुम्हाला रिफ्रेश पद्धत कॉल करणे आवश्यक आहे. |
रिफ्रेश पद्धत वापरून येथे एक उदाहरण आहे:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
कार्यक्रम
| कार्यक्रम | वर्णन |
|---|---|
activate.bs.scrollspy |
जेव्हा स्क्रोलस्पाय द्वारे अँकर सक्रिय केला जातो तेव्हा हा कार्यक्रम स्क्रोल घटकावर चालू होतो. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})