स्क्रॉलस्पी
स्वयमेव Bootstrap नेविगेशनं अथवा स्क्रॉलस्थानस्य आधारेण सूचीसमूहघटकानाम् अद्यतनीकरणं कुर्वन्तु यत् सूचयति यत् दृश्यपोर्टे वर्तमानसमये कोऽपि लिङ्कः सक्रियः अस्ति ।
कथं कार्यं करोति
Scrollspy .activeanchor ( ) तत्वों पर वर्ग को टॉगल करता है जब anchor's द्वारा सन्दर्भित <a>तत्व दृश्य में स्क्रॉल किया जाता है। Scrollspy इत्यस्य उपयोगः Bootstrap nav component अथवा list group इत्यनेन सह सर्वोत्तमरूपेण भवति , परन्तु वर्तमानपृष्ठे कस्यापि anchor elements इत्यनेन सह अपि कार्यं करिष्यति । अत्र कथं कार्यं करोति।idhref
-
आरम्भार्थं scrollspy इत्यस्य कृते द्वौ वस्तूनि आवश्यकानि सन्ति: नेविगेशन, सूचीसमूहः, अथवा लिङ्कानां सरलसमूहः, अपि च स्क्रॉल-योग्यं पात्रम् ।
<body>स्क्रॉल-योग्यं पात्रं समुच्चयेन सह कस्टम् एलिमेण्ट् वा भवितुम् अर्हतिheightतथा चoverflow-y: scroll. -
स्क्रॉल-योग्य-पात्रे, योजयन्तु
data-bs-spy="scroll"तथा चdata-bs-target="#navId"कुत्र सम्बद्धस्य नेविगेशनस्यnavIdअद्वितीयम् अस्ति । कीबोर्ड-प्रवेशं सुनिश्चित्यida अपि अवश्यं समावेशयन्तु ।tabindex="0" -
यथा भवन्तः “spied” पात्रं स्क्रॉलं कुर्वन्ति
.activeतथा तथा सम्बद्धस्य नेविगेशनस्य अन्तः एङ्कर् लिङ्क् तः एकः वर्गः योजितः भवति, निष्कासितः च भवति । लिङ्केषु समाधानयोग्याः लक्ष्याणि भवितुमर्हन्तिid, अन्यथा ते उपेक्षिताः भवन्ति । यथा, a<a href="#home">home</a>DOM इव किमपि अनुरूपं भवितुमर्हति<div id="home"></div> -
ये लक्ष्यतत्त्वानि न दृश्यन्ते ते उपेक्षिताः भविष्यन्ति। अधः Non-visible elements इति विभागं पश्यन्तु ।
उदाहरणानि
नवबर
navbar इत्यस्य अधः क्षेत्रं स्क्रॉल कृत्वा सक्रियवर्गस्य परिवर्तनं पश्यन्तु । ड्रॉप् डाउन मेन्यू उद्घाट्य ड्रॉप् डाउन आइटम्स् अपि हाइलाइट् भवन्ति इति पश्यन्तु ।
प्रथमं शीर्षकम्
इदं 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>
नेस्टेड नव
Scrollspy अपि nested .navs इत्यनेन सह कार्यं करोति । यदि नेस्टेड् .navअस्ति .activeतर्हि तस्य मातापितरौ अपि भविष्यन्ति .active| navbar इत्यस्य पार्श्वे स्थितं क्षेत्रं स्क्रॉल कृत्वा सक्रियवर्गस्य परिवर्तनं पश्यन्तु ।
मद 1
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मनसि धारयतु यत् जावास्क्रिप्ट् प्लगिन् सर्वेषु दृश्यमानेषु समीचीनं तत्त्वं चिन्वितुं प्रयतते । एकस्मिन् समये अनेकाः दृश्यमानाः स्क्रॉलस्पी लक्ष्याः केचन समस्याः उत्पद्यन्ते ।
मद 1-1
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मनसि धारयतु यत् जावास्क्रिप्ट् प्लगिन् सर्वेषु दृश्यमानेषु समीचीनं तत्त्वं चिन्वितुं प्रयतते । एकस्मिन् समये अनेकाः दृश्यमानाः स्क्रॉलस्पी लक्ष्याः केचन समस्याः उत्पद्यन्ते ।
मद 1-2
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मनसि धारयतु यत् जावास्क्रिप्ट् प्लगिन् सर्वेषु दृश्यमानेषु समीचीनं तत्त्वं चिन्वितुं प्रयतते । एकस्मिन् समये अनेकाः दृश्यमानाः स्क्रॉलस्पी लक्ष्याः केचन समस्याः उत्पद्यन्ते ।
मद 2
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मनसि धारयतु यत् जावास्क्रिप्ट् प्लगिन् सर्वेषु दृश्यमानेषु समीचीनं तत्त्वं चिन्वितुं प्रयतते । एकस्मिन् समये अनेकाः दृश्यमानाः स्क्रॉलस्पी लक्ष्याः केचन समस्याः उत्पद्यन्ते ।
मद 3
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मनसि धारयतु यत् जावास्क्रिप्ट् प्लगिन् सर्वेषु दृश्यमानेषु समीचीनं तत्त्वं चिन्वितुं प्रयतते । एकस्मिन् समये अनेकाः दृश्यमानाः स्क्रॉलस्पी लक्ष्याः केचन समस्याः उत्पद्यन्ते ।
मद 3-1
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मनसि धारयतु यत् जावास्क्रिप्ट् प्लगिन् सर्वेषु दृश्यमानेषु समीचीनं तत्त्वं चिन्वितुं प्रयतते । एकस्मिन् समये अनेकाः दृश्यमानाः स्क्रॉलस्पी लक्ष्याः केचन समस्याः उत्पद्यन्ते ।
मद 3-2
इदं 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 इत्यनेन सह कार्यं करोति । सूचीसमूहस्य पार्श्वे स्थितं क्षेत्रं स्क्रॉल कृत्वा सक्रियवर्गपरिवर्तनं पश्यन्तु ।
मद 1
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मद 2
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मद 3
इदं 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 nav घटकेषु सूचीसमूहेषु च सीमितं नास्ति, अतः <a>वर्तमानदस्तावेजे कस्मिन् अपि anchor elements इत्यत्र कार्यं करिष्यति । क्षेत्रं स्क्रॉल कृत्वा .activeवर्गस्य परिवर्तनं पश्यन्तु।
मद 1
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मद 2
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मद 3
इदं 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>
अदृश्य तत्व
लक्ष्यतत्त्वानि ये न दृश्यन्ते ते उपेक्षिताः भविष्यन्ति तथा च तेषां तत्सम्बद्धाः 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()
})
})
प्रयोगः
डेटा विशेषताओं के माध्यम से
स्वस्य topbar नेविगेशनं प्रति scrollspy व्यवहारं सुलभतया योजयितुं, data-bs-spy="scroll"यस्मिन् तत्त्वं गुप्तचरयितुम् इच्छति तस्मिन् तत्त्वे योजयन्तु (अधिकांशतः एतत् स्यात् <body>) । ततः कस्यापि Bootstrap घटकस्य parent element इत्यस्य or class name data-bs-targetइत्यनेन सह attribute योजयन्तु ।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 attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते, भवान् विकल्पनाम योजयितुं शक्नोति data-bs-, यथा data-bs-animation="{value}". data attributes मार्गेण विकल्पान् पारयन्ते सति विकल्पनामस्य case type “ camelCase ” तः “ kebab-case ” इति परिवर्तयितुं सुनिश्चितं कुर्वन्तु । यथा - इत्यस्य data-bs-custom-class="beautifier"स्थाने प्रयोगं कुर्वन्तु data-bs-customClass="beautifier"।
Bootstrap 5.2.0 तः, सर्वे घटकाः प्रयोगात्मकं आरक्षितदत्तांशविशेषणं समर्थयन्ति data-bs-configयत् सरलघटकविन्यासं JSON स्ट्रिंग् रूपेण स्थापयितुं शक्नोति । यदा कस्यचित् तत्त्वस्य data-bs-config='{"delay":0, "title":123}'and data-bs-title="456"attributes भवति तदा अन्तिममूल्यं titleभविष्यति 456तथा च पृथक् data attributes इत्यत्र दत्तानि मूल्यानि अधिलिखिष्यन्ति data-bs-config। तदतिरिक्तं, विद्यमानाः दत्तांशविशेषताः JSON मूल्यानि यथा - स्थापनं कर्तुं समर्थाः सन्ति data-bs-delay='{"show":0,"hide":150}'।
| नामः | प्रकारः | मूलभूतम् | वर्णनम् |
|---|---|---|---|
rootMargin |
सूत्र | 0px 0px -25% |
Intersection Observer rootMargin वैध इकाइयां, स्क्रॉल स्थिति की गणना करते समय। |
smoothScroll |
बूलियन इति | false |
यदा उपयोक्ता ScrollSpy अवलोकनीयानि सन्दर्भयति इति लिङ्क् क्लिक् करोति तदा सुचारु स्क्रॉलिंग् सक्षमं करोति । |
target |
स्ट्रिंग्, DOM तत्व | null |
Scrollspy प्लगिन् प्रयोक्तुं तत्त्वं निर्दिशति । |
threshold |
सरणी | [0.1, 0.5, 1] |
IntersectionObserver threshold वैध इनपुट, स्क्रॉल स्थिति की गणना करते समय। |
अप्रचलित विकल्प
v5.1.3 पर्यन्तं वयं offset& methodविकल्पानां उपयोगं कुर्वन्तः आसन्, ये इदानीं अप्रचलिताः सन्ति, तेषां स्थाने rootMargin. पश्चात् संगततां स्थापयितुं वयं given offsetto इत्यस्य विश्लेषणं निरन्तरं करिष्यामः, परन्तु v6rootMargin मध्ये एतत् विशेषतां निष्कासितम् भविष्यति ।
विधियाँ
| प्रक्रिया | वर्णनम् |
|---|---|
dispose |
एकस्य तत्त्वस्य scrollspy नष्टं करोति। (DOM तत्वे संगृहीतदत्तांशं निष्कासयति) |
getInstance |
DOM तत्वेन सह सम्बद्धं scrollspy उदाहरणं प्राप्तुं स्थिरविधिः । |
getOrCreateInstance |
DOM तत्वेन सह सम्बद्धं scrollspy दृष्टान्तं प्राप्तुं स्थिरविधिः, अथवा आरम्भः न कृतः चेत् नूतनं निर्मातुं । |
refresh |
DOM मध्ये एलिमेण्ट्स् योजयितुं वा निष्कासयितुं वा भवद्भिः refresh मेथड् आह्वयितुं आवश्यकं भविष्यति । |
अत्र refresh मेथड् इत्यस्य उपयोगेन उदाहरणम् अस्ति ।
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...
})