स्क्रॉलस्पाई
स्क्रॉल स्थिति दे आधार उप्पर बूटस्ट्रैप नेविगेशन जां सूची समूह घटकें गी स्वतः अपडेट करो तां जे एह् दस्सेआ जाई सकै जे कुस लिंक गी इसलै व्यूपोर्ट च सक्रिय ऐ.
किवें कम्म करदा है
स्क्रॉलस्पाई .activeएंकर ( ) तत्वें पर वर्ग गी टॉगल करदा ऐ जिसलै एंकर दे द्वारा संदर्भित <a>तत्व गी दृश्य च स्क्रॉल कीता जंदा ऐ. Scrollspy दा इस्तेमाल इक बूटस्ट्रैप nav घटक जां सूची समूह कन्नै मिलियै कीता जंदा ऐ , पर एह् मौजूदा पृष्ठ च कुसै बी एंकर तत्वें कन्नै बी कम्म करग. इत्थें एह् किस चाल्ली कम्म करदा ऐ।idhref
-
शुरू करने आस्तै, स्क्रॉलस्पी गी दो चीजें दी लोड़ होंदी ऐ: इक नेविगेशन, सूची समूह, जां लिंकें दा इक साधारण सेट, प्लस इक स्क्रॉल करने योग्य कंटेनर। स्क्रॉल करने योग्य कंटेनर
<body>इक सेट कन्नै जां इक कस्टम तत्व होई सकदा ऐheightतेoverflow-y: scroll. -
स्क्रॉल करने योग्य कंटेनर पर, जोड़ो
data-bs-spy="scroll"ते संबद्ध नेविगेशन दा अनोखाdata-bs-target="#navId"कुत्थें ऐ। कीबोर्ड एक्सेस गी सुनिश्चित करने लेई इक बी ज़रूर शामल करो ।navIdidtabindex="0" -
जियां गै तुस "जासूसी" कंटेनर गी स्क्रॉल करदे ओ, इक
.activeवर्ग जोड़ेआ जंदा ऐ ते संबद्ध नेविगेशन दे अंदर एंकर लिंक थमां हटाया जंदा ऐ। लिंक च हल करने योग्यidलक्ष्य होन चाहिदे न, नेईं ते उनेंगी नजरअंदाज कीता जंदा ऐ। मसलन, ए<a href="#home">home</a>डीओएम च कुसै चीज़ कन्नै मेल खंदा ऐ जि’यां<div id="home"></div> -
लक्ष्य तत्व जेह् ड़े दिक्खे नेईं जा करदे न उ’नेंगी नजरअंदाज कीता जाग। हेठ दित्ते गेदे गैर-दृश्य तत्वें दा खंड दिक्खो।
उदाहरण दे
नवबर जी
नवबार दे हेठ दित्ते गेदे इलाके गी स्क्रॉल करो ते सक्रिय वर्ग बदलदे दिक्खो। ड्रॉपडाउन मेनू खोलो ते ड्रॉपडाउन आइटमें गी बी हाइलाइट होंदे दिक्खो।
पैह्ला हेडिंग
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
दूजा हेडिंग
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
तीसरा हेडिंग
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
चौथा शीर्षक
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
पंचम शीर्षक
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
<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एस कन्नै बी कम्म करदा ऐ। जेकर कोई नेस्टेड .navऐ .activeतां उसदे माता - पिता बी होंगन .active. नवबार दे बगल दे इलाके गी स्क्रॉल करो ते सक्रिय वर्ग बदलदे दिक्खो।
मद 1 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
ध्यान रक्खो जे जावास्क्रिप्ट प्लगइन उनें सारें च सच्चे तत्व गी चुनने दी कोशश करदा ऐ जेह् ड़े दिक्खे जाई सकदे न. इक गै समें च मते सारे दिक्खने आह् ले स्क्रॉलस्पी लक्ष्य किश मुद्दे पैदा करी सकदे न।
मद 1-1 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
ध्यान रक्खो जे जावास्क्रिप्ट प्लगइन उनें सारें च सच्चे तत्व गी चुनने दी कोशश करदा ऐ जेह् ड़े दिक्खे जाई सकदे न. इक गै समें च मते सारे दिक्खने आह् ले स्क्रॉलस्पी लक्ष्य किश मुद्दे पैदा करी सकदे न।
मद 1-2 दा
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
ध्यान रक्खो जे जावास्क्रिप्ट प्लगइन उनें सारें च सच्चे तत्व गी चुनने दी कोशश करदा ऐ जेह् ड़े दिक्खे जाई सकदे न. इक गै समें च मते सारे दिक्खने आह् ले स्क्रॉलस्पी लक्ष्य किश मुद्दे पैदा करी सकदे न।
मद 2 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
ध्यान रक्खो जे जावास्क्रिप्ट प्लगइन उनें सारें च सच्चे तत्व गी चुनने दी कोशश करदा ऐ जेह् ड़े दिक्खे जाई सकदे न. इक गै समें च मते सारे दिक्खने आह् ले स्क्रॉलस्पी लक्ष्य किश मुद्दे पैदा करी सकदे न।
मद 3 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
ध्यान रक्खो जे जावास्क्रिप्ट प्लगइन उनें सारें च सच्चे तत्व गी चुनने दी कोशश करदा ऐ जेह् ड़े दिक्खे जाई सकदे न. इक गै समें च मते सारे दिक्खने आह् ले स्क्रॉलस्पी लक्ष्य किश मुद्दे पैदा करी सकदे न।
मद 3-1 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
ध्यान रक्खो जे जावास्क्रिप्ट प्लगइन उनें सारें च सच्चे तत्व गी चुनने दी कोशश करदा ऐ जेह् ड़े दिक्खे जाई सकदे न. इक गै समें च मते सारे दिक्खने आह् ले स्क्रॉलस्पी लक्ष्य किश मुद्दे पैदा करी सकदे न।
मद 3-2 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
ध्यान रक्खो जे जावास्क्रिप्ट प्लगइन उनें सारें च सच्चे तत्व गी चुनने दी कोशश करदा ऐ जेह् ड़े दिक्खे जाई सकदे न. इक गै समें च मते सारे दिक्खने आह् ले स्क्रॉलस्पी लक्ष्य किश मुद्दे पैदा करी सकदे न।
<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>
समूह दी सूची
स्क्रॉलस्पाई .list-groupएस कन्नै बी कम्म करदा ऐ। सूची समूह दे बगल दे इलाके गी स्क्रॉल करो ते सक्रिय वर्ग बदलदे दिक्खो।
मद 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>
सादे लंगर
स्क्रॉलस्पाई nav घटकें ते सूची समूहें तगर सीमित नेईं ऐ, इसलेई एह् <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>
गैर-दृश्य तत्व
लक्ष्य तत्वें गी जेह् ड़े दिक्खे नेईं जा करदे न उनेंगी अनदेखा कीता जाग ते उंदे सरबंधत nav आइटमें गी इक .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>
जावास्क्रिप्ट दे जरिए
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
विकल्प ऐ
चूंकि विकल्पें गी डेटा विशेषताएं जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ, तुस इक विकल्प नांऽ गी data-bs-, च जोड़ सकदे ओ , जिऱयां data-bs-animation="{value}". डेटा विशेषताएं दे राहें विकल्पें गी पास करदे बेल्लै विकल्प नांऽ दे केस प्रकार गी “ camelCase ” थमां “ कबाब-केस ” च बदलना सुनिश्चत करो . मसलन, 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% |
इंटरसेक्शन पर्यवेक्षक rootMargin वैध इकाइयां, स्क्रॉल स्थिति दी गणना करदे बेल्लै। |
smoothScroll |
बूलियन | false |
जदूं कोई बरतूनी उस लिंक पर क्लिक करदा ऐ जेह् ड़ा ScrollSpy अवलोकन करने आह् ले दा संदर्भ दिंदा ऐ तां सुचारू स्क्रॉलिंग गी सक्षम करदा ऐ. |
target |
स्ट्रिंग, डोम तत्व | null |
स्क्रॉलस्पाई प्लगइन गी लागू करने आस्तै तत्व निर्दिश्ट करदा ऐ. |
threshold |
सरणी | [0.1, 0.5, 1] |
IntersectionObserver थ्रेशोल्ड वैध इनपुट, स्क्रॉल स्थिति दी गणना करदे बेल्लै। |
पदावनत कीते गेदे विकल्प
v5.1.3 तगर अस offset& methodविकल्पें दा इस्तेमाल करा करदे हे, जेह् ड़े हून पदावनत कीते गेदे न ते rootMargin. पिछले संगतता गी रखने आस्तै, अस इक दित्ते गेदे गी पार्स करना जारी रक्खगे offset, पर एह् सुविधा v6rootMargin च हटाई दित्ता जाग .
विधियां
| तरीका | ब्यौरा |
|---|---|
dispose |
इक तत्व दी स्क्रॉलस्पी गी नष्ट करदा ऐ। (डीओएम तत्व पर संग्रहीत डेटा गी हटांदा ऐ) |
getInstance |
इक DOM तत्व कन्नै जुड़े दा स्क्रॉलस्पी इंस्टेंस हासल करने आस्तै स्थिर विधि. |
getOrCreateInstance |
इक DOM तत्व कन्नै जुड़े दा स्क्रॉलस्पी इंस्टेंस हासल करने आस्तै स्थिर विधि, जां इस मामले च इक नमां बनाने आस्तै एह् शुरू नेईं कीता गेआ हा. |
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...
})