स्क्रॉलस्पी
स्वयमेव Bootstrap नेविगेशनं अथवा स्क्रॉलस्थानस्य आधारेण सूचीसमूहघटकानाम् अद्यतनीकरणं कुर्वन्तु यत् सूचयति यत् दृश्यपोर्टे वर्तमानसमये कोऽपि लिङ्कः सक्रियः अस्ति ।
कथं कार्यं करोति
Scrollspy इत्यस्य सम्यक् कार्यं कर्तुं कतिपयानि आवश्यकतानि सन्ति:
- तस्य उपयोगः Bootstrap nav घटके अथवा सूचीसमूहे अवश्यं करणीयः |
- Scrollspy इत्यस्य आवश्यकता
position: relative;अस्ति यस्मिन् तत्त्वे भवन्तः जासूसीं कुर्वन्ति, प्रायः<body>. - लंगराः (
<a>) आवश्यकाः सन्ति , तेन सह एकं तत्त्वं सूचयितव्यम्id|
यदा सफलतया कार्यान्वितं भवति तदा भवतः nav अथवा सूचीसमूहः तदनुसारं अद्यतनं करिष्यति, .activeतेषां सम्बद्धलक्ष्याणां आधारेण वर्गं एकस्मात् द्रव्यात् परं द्रव्यं प्रति स्थानान्तरयिष्यति ।
स्क्रॉल करने योग्य पात्र एवं कीबोर्ड पहुँच
यदि भवान् स्क्रॉल-योग्यं पात्रं (अन्यत् <body>) करोति तर्हि अवश्यमेव एकं heightसेट् अस्ति तथा च overflow-y: scroll;तस्मिन् प्रयुक्तं भवतु- tabindex="0"कीबोर्ड-प्रवेशं सुनिश्चित्य a पार्श्वे ।
नवबार में उदाहरण
navbar इत्यस्य अधः क्षेत्रं स्क्रॉल कृत्वा सक्रियवर्गस्य परिवर्तनं पश्यन्तु । ड्रॉप्-डाउन-वस्तूनि अपि प्रकाशितानि भविष्यन्ति ।
प्रथमं शीर्षकम्
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
द्वितीयं शीर्षकम्
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
तृतीय शीर्षक
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
चतुर्थं शीर्षकम्
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
पञ्चमशीर्षकम्
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
<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>
nested nav इत्यनेन सह उदाहरणम्
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 पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
<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 इत्यनेन सह उदाहरणम्
Scrollspy अपि .list-groups इत्यनेन सह कार्यं करोति । सूचीसमूहस्य पार्श्वे स्थितं क्षेत्रं स्क्रॉल कृत्वा सक्रियवर्गपरिवर्तनं पश्यन्तु ।
मद 1
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मद 2
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मद 3
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
मद ४
इदं scrollspy पृष्ठस्य कृते किञ्चित् स्थानधारकसामग्री अस्ति । ध्यानं कुर्वन्तु यत् यथा यथा भवन्तः पृष्ठं अधः स्क्रॉलं कुर्वन्ति तथा तथा समुचितं नेविगेशनलिङ्क् प्रकाशितं भवति । सम्पूर्णे घटकोदाहरणे पुनरावृत्तिः भवति। स्क्रॉलिंग् तथा हाइलाइटिङ्ग् इत्यत्र बलं दातुं वयं अत्र किञ्चित् अधिकं उदाहरणप्रतिलिपिं योजयामः ।
<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>
प्रयोगः
डेटा विशेषताओं के माध्यम से
स्वस्य topbar नेविगेशनं प्रति scrollspy व्यवहारं सुलभतया योजयितुं, data-bs-spy="scroll"यस्मिन् तत्त्वं गुप्तचरयितुम् इच्छति तस्मिन् तत्त्वे योजयन्तु (अधिकांशतः एतत् स्यात् <body>) । data-bs-targetततः कस्यापि Bootstrap .navघटकस्य parent element इत्यस्य ID अथवा class इत्यनेन सह attribute योजयन्तु ।
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;जावास्क्रिप्ट् मार्गेण scrollspy आह्वयन्तु :
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
समाधानयोग्य आईडी लक्ष्य आवश्यक है
नवबार लिङ्केषु समाधानयोग्याः id लक्ष्याणि भवितुमर्हन्ति । यथा, a <a href="#home">home</a>इत्यस्य DOM इत्यस्मिन् किमपि अनुरूपं भवितुमर्हति यथा <div id="home"></div>.
अदृश्य लक्ष्य तत्वों को उपेक्षित किया गया
ये लक्ष्यतत्त्वानि न दृश्यन्ते ते अवहेलिताः भविष्यन्ति तथा च तेषां तत्सम्बद्धानि nav वस्तूनि कदापि प्रकाशितानि न भविष्यन्ति ।
विधियाँ
ताजगी
DOM तः एलिमेण्ट्स् योजयितुं वा निष्कासयितुं वा सह scrollspy इत्यस्य उपयोगं कुर्वन् भवद्भिः refresh मेथड् इत्येतत् एवं आह्वयितुं आवश्यकं भविष्यति:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
विसर्जयेत्
एकस्य तत्त्वस्य scrollspy नष्टं करोति। (DOM तत्वे संगृहीतदत्तांशं निष्कासयति)
getInstance इति
स्थिरविधिः या भवन्तं DOM तत्वेन सह सम्बद्धं scrollspy उदाहरणं प्राप्तुं शक्नोति
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateइन्स्टेंस इति
स्थिरविधिः या भवन्तं DOM तत्वेन सह सम्बद्धं scrollspy दृष्टान्तं प्राप्तुं शक्नोति, अथवा नूतनं निर्मातुं शक्नोति यद्यपि तत् आरम्भं न कृतम् आसीत्
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
विकल्पाः
विकल्पाः data attributes अथवा JavaScript मार्गेण पा���यितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-bs-योजयन्तु data-bs-offset=""।
| नामः | प्रकारः | मूलभूतम् | वर्णनम् |
|---|---|---|---|
offset |
संख्या | 10 |
स्क्रॉलस्य स्थितिं गणयन्ते सति उपरितः ऑफसेट् कर्तुं पिक्सेल्। |
method |
सूत्र | auto |
स्पायड् एलिमेण्ट् कस्मिन् खण्डे अस्ति इति autoज्ञात्वा स्क्रॉल निर्देशांकं प्राप्तुं सर्वोत्तमविधिं चयनं करिष्यति । स्क्रॉल निर्देशांकं प्राप्तुं विधिं offsetउपयुज्यते । स्क्रॉल निर्देशांकं प्राप्तुं and गुणानाम् उपयोगं करिष्यति ।Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft |
target |
तार | jQuery वस्तु | DOM तत्वम् | Scrollspy प्लगिन् प्रयोक्तुं तत्त्वं निर्दिशति । |
घटनाः
| घटना प्रकार | वर्णनम् |
|---|---|
activate.bs.scrollspy |
यदा कदापि नूतनं द्रव्यं scrollspy द्वारा सक्रियं भवति तदा एषा घटना स्क्रॉल-तत्त्वे प्रज्वालयति । |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})