स्क्रॉलस्पाई
स्क्रॉल स्थिति दे आधार उप्पर बूटस्ट्रैप नेविगेशन जां सूची समूह घटकें गी स्वतः अपडेट करो तां जे एह् दस्सेआ जाई सकै जे कुस लिंक गी इसलै व्यूपोर्ट च सक्रिय ऐ.
किवें कम्म करदा है
स्क्रॉलस्पाई गी ठीक ढंगै कन्नै कम्म करने आस्तै किश जरूरी गल्लां न:
- इसदा इस्तेमाल इक बूटस्ट्रैप नेव घटक जां सूची समूह पर कीता जाना लोड़चदा ऐ .
- 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>
नेस्टेड नव कन्नै उदाहरण
स्क्रॉलस्पाई नेस्टेड .navएस कन्नै बी कम्म करदा ऐ। जेकर कोई नेस्टेड .navऐ .activeतां उसदे माता - पिता बी होंगन .active. नवबार दे बगल दे इलाके गी स्क्रॉल करो ते सक्रिय वर्ग बदलदे दिक्खो।
मद 1 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
मद 1-1 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
मद 1-2 दा
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
मद 2 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
मद 3 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
मद 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>
सूची-समूह कन्नै उदाहरण
स्क्रॉलस्पाई .list-groupएस कन्नै बी कम्म करदा ऐ। सूची समूह दे बगल दे इलाके गी स्क्रॉल करो ते सक्रिय वर्ग बदलदे दिक्खो।
मद 1 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
मद 2 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
मद 3 ऐ
एह् स्क्रॉलस्पाई पृष्ठ आस्तै किश प्लेसहोल्डर सामग्री ऐ । ध्यान रक्खो जे जि’यां-जि’यां तुस पृष्ठ थमां हेठ स्क्रॉल करदे ओ, उ’यां गै उचित नेविगेशन लिंक हाइलाइट होई जंदा ऐ। एह् पूरे घटक उदाहरण च दोहराया जंदा ऐ। स्क्रॉल ते हाइलाइट करने पर जोर देने आस्तै अस इत्थें किश होर उदाहरण प्रतिलिपि जोड़दे रौंह्दे आं।
मद 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 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>
प्रयोग करना
डेटा विशेषताएं दे माध्यम कन्नै
अपने टॉपबार नेविगेशन च स्क्रॉलस्पी व्यवहार गी आसानी कन्नै जोड़ने आस्तै, data-bs-spy="scroll"उस तत्व च जोड़ो जिस पर तुस जासूसी करना चांह् दे ओ (सबने शा आम तौर पर एह् होग <body>). फिर कुसै बी बूटस्ट्रैप घटक data-bs-targetदे पैरेंट तत्व दी आईडी जां क्लास कन्नै एट्रिब्यूट जोड़ो ..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'
})
हल करने योग्य आईडी लक्ष्यें दी लोड़ ऐ
नवबार लिंक च हल करने योग्य आईडी लक्ष्य होन चाहिदे न। मसाल आस्तै, इक <a href="#home">home</a>गी डीओएम च कुसै चीज़ कन्नै मेल खंदा ऐ जि’यां <div id="home"></div>.
गैर-दृश्य लक्ष्य तत्वें गी अनदेखा कीता गेआ
लक्ष्य तत्वें गी जेह् ड़े नेईं दिक्खे जा करदे न उ’नेंगी नजरअंदाज कीता जाग ते उंदे सरबंधत नव आइटमें गी कदें बी हाइलाइट नेईं कीता जाग।
विधियां
ताज़ा करना
DOM थमां तत्वें गी जोड़ने जां हटाने दे कन्नै-कन्नै scrollspy दा इस्तेमाल करदे बेल्लै तुसेंगी ताज़ा करने दी विधि गी इस चाल्ली बुलाने दी लोड़ होग:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
निपटान करना
इक तत्व दी स्क्रॉलस्पी गी नष्ट करदा ऐ। (डीओएम तत्व पर संग्रहीत डेटा गी हटांदा ऐ)
getInstance दा
स्थिर विधि जेह् ड़ी तुसेंगी इक DOM तत्व कन्नै जुड़ी दी स्क्रॉलस्पी इंस्टेंस हासल करने दी इजाजत दिंदी ऐ
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance ऐ
स्थिर विधि जेह् ड़ी तुसेंगी इक DOM तत्व कन्नै जुड़ी दी स्क्रॉलस्पी इंस्टेंस हासल करने दी इजाजत दिंदी ऐ , जां इस मामले च इक नमां बनाओ जेकर एह् शुरू नेईं कीता गेआ हा
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उपयोग करग । स्क्रॉल निर्देशांक हासल करने लेई ते गुणें दा इस्तेमाल करग ।Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft |
target |
तार | जेक्वेरी वस्तु | डोम तत्व | स्क्रॉलस्पाई प्लगइन गी लागू करने आस्तै तत्व निर्दिश्ट करदा ऐ. |
घटनाएं
| घटना दा प्रकार | ब्यौरा |
|---|---|
activate.bs.scrollspy |
एह् घटना स्क्रॉल तत्व पर फायर करदी ऐ जिसलै बी कोई नमीं आइटम स्क्रॉलस्पी आसेआ सक्रिय होई जंदी ऐ। |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})