Scrollspy
बुटस्ट्र्याप नेभिगेसन वा सूची समूह कम्पोनेन्टहरू स्क्रोल स्थितिमा आधारित भ्यूपोर्टमा हाल कुन लिङ्क सक्रिय छ भनेर संकेत गर्न स्वचालित रूपमा अद्यावधिक गर्नुहोस्।
यसले कसरी काम गर्छ
Scrollspy .activeले एङ्कर ( <a>) तत्वहरूमा वर्गलाई टगल गर्दछ जब एङ्करद्वारा idसन्दर्भ गरिएको तत्वलाई hrefदृश्यमा स्क्रोल गरिन्छ। Scrollspy सबैभन्दा राम्रो Bootstrap nav कम्पोनेन्ट वा सूची समूहसँग संयोजनमा प्रयोग गरिन्छ , तर यसले हालको पृष्ठमा कुनै पनि एंकर तत्वहरूसँग पनि काम गर्नेछ। यो कसरी काम गर्छ यहाँ छ।
-
सुरु गर्नको लागि, scrollspy लाई दुई चीजहरू चाहिन्छ: नेभिगेसन, सूची समूह, वा लिङ्कहरूको एक साधारण सेट, साथै स्क्रोल योग्य कन्टेनर। स्क्रोल गर्न मिल्ने कन्टेनर सेट र
<body>संग अनुकूल तत्व हुन सक्छ ।heightoverflow-y: scroll -
स्क्रोल गर्न मिल्ने कन्टेनरमा, जोड्नुहोस्
data-bs-spy="scroll"र सम्बन्धित नेभिगेसनको अद्वितीयdata-bs-target="#navId"कहाँ छ। किबोर्ड पहुँच सुनिश्चित गर्न पनि समावेश गर्न निश्चित हुनुहोस् ।navIdidtabindex="0" -
तपाईंले "जासुसी" कन्टेनर स्क्रोल गर्दा
.active, सम्बन्धित नेभिगेसन भित्र एङ्कर लिङ्कहरूबाट एउटा वर्ग थपिन्छ र हटाइन्छ। लिङ्कहरू समाधान गर्न योग्य लक्ष्यहरू हुनुपर्छid, अन्यथा तिनीहरूलाई बेवास्ता गरिन्छ। उदाहरण को लागी,<a href="#home">home</a>DOM मा केहि संग मेल खानु पर्छ जस्तै<div id="home"></div> -
नदेखिने लक्ष्य तत्वहरूलाई बेवास्ता गरिनेछ। तल नदेखिने तत्वहरू खण्ड हेर्नुहोस्।
उदाहरणहरू
नवबार
नेभबार तलको क्षेत्र स्क्रोल गर्नुहोस् र सक्रिय वर्ग परिवर्तन हेर्नुहोस्। ड्रपडाउन मेनु खोल्नुहोस् र ड्रपडाउन वस्तुहरू पनि हाइलाइट गरिएको हेर्नुहोस्।
पहिलो शीर्षक
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
दोस्रो शीर्षक
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
तेस्रो शीर्षक
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
चौथो शीर्षक
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
पाँचौं शीर्षक
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
<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। नेभबारको छेउमा रहेको क्षेत्र स्क्रोल गर्नुहोस् र सक्रिय वर्ग परिवर्तन हेर्नुहोस्।
वस्तु १
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
ध्यान राख्नुहोस् कि जाभास्क्रिप्ट प्लगइनले देख्न सक्ने सबै मध्ये सही तत्व छान्ने प्रयास गर्दछ। एकै समयमा धेरै देखिने scrollspy लक्ष्यहरूले केही समस्याहरू निम्त्याउन सक्छ।
वस्तु १-१
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
ध्यान राख्नुहोस् कि जाभास्क्रिप्ट प्लगइनले देख्न सक्ने सबै मध्ये सही तत्व छान्ने प्रयास गर्दछ। एकै समयमा धेरै देखिने scrollspy लक्ष्यहरूले केही समस्याहरू निम्त्याउन सक्छ।
वस्तु १-२
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
ध्यान राख्नुहोस् कि जाभास्क्रिप्ट प्लगइनले देख्न सक्ने सबै मध्ये सही तत्व छान्ने प्रयास गर्दछ। एकै समयमा धेरै देखिने scrollspy लक्ष्यहरूले केही समस्याहरू निम्त्याउन सक्छ।
वस्तु २
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
ध्यान राख्नुहोस् कि जाभास्क्रिप्ट प्लगइनले देख्न सक्ने सबै मध्ये सही तत्व छान्ने प्रयास गर्दछ। एकै समयमा धेरै देखिने scrollspy लक्ष्यहरूले केही समस्याहरू निम्त्याउन सक्छ।
वस्तु ३
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
ध्यान राख्नुहोस् कि जाभास्क्रिप्ट प्लगइनले देख्न सक्ने सबै मध्ये सही तत्व छान्ने प्रयास गर्दछ। एकै समयमा धेरै देखिने scrollspy लक्ष्यहरूले केही समस्याहरू निम्त्याउन सक्छ।
वस्तु ३-१
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
ध्यान राख्नुहोस् कि जाभास्क्रिप्ट प्लगइनले देख्न सक्ने सबै मध्ये सही तत्व छान्ने प्रयास गर्दछ। एकै समयमा धेरै देखिने scrollspy लक्ष्यहरूले केही समस्याहरू निम्त्याउन सक्छ।
वस्तु ३-२
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
ध्यान राख्नुहोस् कि जाभास्क्रिप्ट प्लगइनले देख्न सक्ने सबै मध्ये सही तत्व छान्ने प्रयास गर्दछ। एकै समयमा धेरै देखिने scrollspy लक्ष्यहरूले केही समस्याहरू निम्त्याउन सक्छ।
<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 सँग काम गर्दछ। सूची समूहको छेउमा क्षेत्र स्क्रोल गर्नुहोस् र सक्रिय वर्ग परिवर्तन हेर्नुहोस्।
वस्तु १
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
वस्तु २
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
वस्तु ३
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
वस्तु ४
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
<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कक्षा परिवर्तन हेर्नुहोस्।
वस्तु १
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
वस्तु २
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
वस्तु ३
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
वस्तु ४
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
वस्तु ५
यो scrollspy पृष्ठको लागि केहि प्लेसहोल्डर सामग्री हो। नोट गर्नुहोस् कि तपाईंले पृष्ठ तल स्क्रोल गर्दा, उपयुक्त नेभिगेसन लिङ्क हाइलाइट हुन्छ। यो कम्पोनेन्ट उदाहरण भर दोहोर्याइएको छ। स्क्रोलिङ र हाइलाइटिङलाई जोड दिन हामी यहाँ केही थप उदाहरण प्रतिलिपिहरू थप्दैछौं।
<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कक्षा प्राप्त गर्ने छैनन्। नदेखिने र्यापरमा सुरु गरिएको Scrollspy उदाहरणहरूले सबै लक्षित तत्वहरूलाई बेवास्ता गर्नेछ। 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()
})
})
प्रयोग
डाटा विशेषताहरू मार्फत
तपाईको शीर्षपट्टी नेभिगेसनमा सजिलैसँग scrollspy व्यवहार थप्नको 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>
जाभास्क्रिप्ट मार्फत
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
विकल्पहरू
डेटा विशेषताहरू वा JavaScript मार्फत विकल्पहरू पास गर्न सकिने हुनाले, तपाईंले विकल्प नाम जोड्न सक्नुहुन्छ data-bs-, जस्तै मा data-bs-animation="{value}"। डेटा विशेषताहरू मार्फत विकल्पहरू पास गर्दा विकल्प नामको केस प्रकारलाई " camelCase " बाट " kebab-case " मा परिवर्तन गर्न निश्चित गर्नुहोस्। उदाहरण को लागी, data-bs-custom-class="beautifier"को सट्टा प्रयोग गर्नुहोस् data-bs-customClass="beautifier"।
बुटस्ट्र्याप ५.२.० को रूपमा, सबै कम्पोनेन्टहरूले प्रयोगात्मक आरक्षित डेटा विशेषतालाई समर्थन गर्दछ 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 |
string, DOM तत्व | null |
Scrollspy प्लगइन लागू गर्न तत्व निर्दिष्ट गर्दछ। |
threshold |
array | [0.1, 0.5, 1] |
IntersectionObserver स्क्रोल स्थिति गणना गर्दा थ्रेसहोल्ड मान्य इनपुट। |
बहिष्कृत विकल्पहरू
v5.1.3 सम्म हामीले offset& methodविकल्पहरू प्रयोग गरिरहेका थियौं, जुन अब हटाइएको र प्रतिस्थापन गरिएको छ rootMargin। ब्याकवर्ड कम्प्याटिबिलिटी राख्नको लागि, हामी दिइएकोलाई पार्स गर्न जारी राख्नेछौं offset, तर यो सुविधा v6rootMargin मा हटाइनेछ ।
विधिहरू
| विधि | विवरण |
|---|---|
dispose |
तत्वको स्क्रोलस्पीलाई नष्ट गर्छ। (DOM तत्वमा भण्डारण गरिएको डाटा हटाउँछ) |
getInstance |
DOM तत्वसँग सम्बन्धित scrollspy उदाहरण प्राप्त गर्न स्थिर विधि। |
getOrCreateInstance |
स्थिर विधि DOM तत्वसँग सम्बन्धित scrollspy उदाहरण प्राप्त गर्न, वा यो प्रारम्भ नगरिएको अवस्थामा नयाँ सिर्जना गर्न। |
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...
})