സ്ക്രോൾസ്പി
ബൂട്ട്സ്ട്രാപ്പ് നാവിഗേഷൻ സ്വയമേവ അപ്‌ഡേറ്റ് ചെയ്യുക അല്ലെങ്കിൽ വ്യൂപോർട്ടിൽ നിലവിൽ ഏത് ലിങ്ക് സജീവമാണെന്ന് സൂചിപ്പിക്കാൻ സ്ക്രോൾ സ്ഥാനത്തെ അടിസ്ഥാനമാക്കി ഗ്രൂപ്പ് ഘടകങ്ങൾ ലിസ്റ്റ് ചെയ്യുക.
ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു
ശരിയായി പ്രവർത്തിക്കാൻ സ്ക്രോൾസ്പിക്ക് ചില ആവശ്യകതകൾ ഉണ്ട്:
- ഇത് ഒരു ബൂട്ട്സ്ട്രാപ്പ് nav ഘടകത്തിലോ ലിസ്റ്റ് ഗ്രൂപ്പിലോ ഉപയോഗിക്കേണ്ടതാണ് .
- Scrollspy
position: relative;നിങ്ങൾ ചാരപ്പണി നടത്തുന്ന ഘടകത്തിൽ ആവശ്യപ്പെടുന്നു, സാധാരണയായി<body>. - ആങ്കറുകൾ (
<a>) ആവശ്യമാണ്, അതിനൊപ്പം ഒരു ഘടകം ചൂണ്ടിക്കാണിക്കുകയും വേണംid.
വിജയകരമായി നടപ്പിലാക്കുമ്പോൾ, നിങ്ങളുടെ നാവിനോ ലിസ്റ്റ് ഗ്രൂപ്പോ അതിനനുസരിച്ച് അപ്‌ഡേറ്റ് ചെയ്യും, .activeബന്ധപ്പെട്ട ടാർഗെറ്റുകളെ അടിസ്ഥാനമാക്കി ക്ലാസിനെ ഒരു ഇനത്തിൽ നിന്ന് അടുത്തതിലേക്ക് മാറ്റും.
സ്ക്രോൾ ചെയ്യാവുന്ന പാത്രങ്ങളും കീബോർഡ് ആക്സസും
നിങ്ങൾ സ്ക്രോൾ ചെയ്യാവുന്ന ഒരു കണ്ടെയ്‌നർ നിർമ്മിക്കുകയാണെങ്കിൽ (ഇത് ഒഴികെയുള്ളത് <body>), കീബോർഡ് ആക്‌സസ് ഉറപ്പാക്കാൻ ഒരു heightസെറ്റിനൊപ്പം overflow-y: scroll;പ്രയോഗിച്ചിട്ടുണ്ടെന്നും ഉറപ്പാക്കുക.tabindex="0"
നവബാറിലെ ഉദാഹരണം
നവബാറിന് താഴെയുള്ള ഏരിയ സ്ക്രോൾ ചെയ്ത് സജീവമായ ക്ലാസ് മാറ്റം കാണുക. ഡ്രോപ്പ്ഡൗൺ ഇനങ്ങളും ഹൈലൈറ്റ് ചെയ്യും.
ആദ്യ തലക്കെട്ട്
സ്ക്രോൾസ്പൈ പേജിനുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉചിതമായ നാവിഗേഷൻ ലിങ്ക് ഹൈലൈറ്റ് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഘടക ഉദാഹരണത്തിലുടനീളം ഇത് ആവർത്തിക്കുന്നു. സ്ക്രോളിംഗും ഹൈലൈറ്റിംഗും ഊന്നിപ്പറയുന്നതിന് ഞങ്ങൾ ചില ഉദാഹരണങ്ങൾ ഇവിടെ ചേർക്കുന്നു.
രണ്ടാമത്തെ തലക്കെട്ട്
സ്ക്രോൾസ്പൈ പേജിനുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉചിതമായ നാവിഗേഷൻ ലിങ്ക് ഹൈലൈറ്റ് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഘടക ഉദാഹരണത്തിലുടനീളം ഇത് ആവർത്തിക്കുന്നു. സ്ക്രോളിംഗും ഹൈലൈറ്റിംഗും ഊന്നിപ്പറയുന്നതിന് ഞങ്ങൾ ചില ഉദാഹരണങ്ങൾ ഇവിടെ ചേർക്കുന്നു.
മൂന്നാമത്തെ തലക്കെട്ട്
സ്ക്രോൾസ്പൈ പേജിനുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉചിതമായ നാവിഗേഷൻ ലിങ്ക് ഹൈലൈറ്റ് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഘടക ഉദാഹരണത്തിലുടനീളം ഇത് ആവർത്തിക്കുന്നു. സ്ക്രോളിംഗും ഹൈലൈറ്റിംഗും ഊന്നിപ്പറയുന്നതിന് ഞങ്ങൾ ചില ഉദാഹരണങ്ങൾ ഇവിടെ ചേർക്കുന്നു.
നാലാമത്തെ തലക്കെട്ട്
സ്ക്രോൾസ്പൈ പേജിനുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉചിതമായ നാവിഗേഷൻ ലിങ്ക് ഹൈലൈറ്റ് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഘടക ഉദാഹരണത്തിലുടനീളം ഇത് ആവർത്തിക്കുന്നു. സ്ക്രോളിംഗും ഹൈലൈറ്റിംഗും ഊന്നിപ്പറയുന്നതിന് ഞങ്ങൾ ചില ഉദാഹരണങ്ങൾ ഇവിടെ ചേർക്കുന്നു.
അഞ്ചാമത്തെ തലക്കെട്ട്
സ്ക്രോൾസ്പൈ പേജിനുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉചിതമായ നാവിഗേഷൻ ലിങ്ക് ഹൈലൈറ്റ് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഘടക ഉദാഹരണത്തിലുടനീളം ഇത് ആവർത്തിക്കുന്നു. സ്ക്രോളിംഗും ഹൈലൈറ്റിംഗും ഊന്നിപ്പറയുന്നതിന് ഞങ്ങൾ ചില ഉദാഹരണങ്ങൾ ഇവിടെ ചേർക്കുന്നു.
<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 ഉള്ള ഉദാഹരണം
Scrollspy നെസ്റ്റഡ് എസിനൊപ്പം പ്രവർത്തിക്കുന്നു .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>
പട്ടിക-ഗ്രൂപ്പിനൊപ്പം ഉദാഹരണം
Scrollspy-ഉം പ്രവർത്തിക്കുന്നു .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>
JavaScript വഴി
നിങ്ങളുടെ CSS- ൽ ചേർത്ത ശേഷം position: relative;, JavaScript വഴി സ്ക്രോൾസ്പൈയെ വിളിക്കുക:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
പരിഹരിക്കാവുന്ന ഐഡി ലക്ഷ്യങ്ങൾ ആവശ്യമാണ്
നവബാർ ലിങ്കുകൾക്ക് പരിഹരിക്കാവുന്ന ഐഡി ടാർഗെറ്റുകൾ ഉണ്ടായിരിക്കണം. ഉദാഹരണത്തിന്, <a href="#home">home</a>DOM-ലെ പോലെയുള്ള ഒന്നുമായി പൊരുത്തപ്പെടണം <div id="home"></div>.
കാണാത്ത ടാർഗെറ്റ് ഘടകങ്ങൾ അവഗണിച്ചു
ദൃശ്യമാകാത്ത ടാർഗെറ്റ് ഘടകങ്ങൾ അവഗണിക്കപ്പെടുകയും അവയുടെ അനുബന്ധ nav ഇനങ്ങൾ ഒരിക്കലും ഹൈലൈറ്റ് ചെയ്യപ്പെടുകയുമില്ല.
രീതികൾ
പുതുക്കുക
DOM-ൽ നിന്ന് ഘടകങ്ങൾ ചേർക്കുന്നതിനോ നീക്കം ചെയ്യുന്നതിനോ ചേർന്ന് സ്ക്രോൾസ്പൈ ഉപയോഗിക്കുമ്പോൾ, നിങ്ങൾ ഇതുപോലെ പുതുക്കൽ രീതി വിളിക്കേണ്ടതുണ്ട്:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
കളയുക
ഒരു മൂലകത്തിന്റെ സ്ക്രോൾസ്പൈ നശിപ്പിക്കുന്നു. (DOM ഘടകത്തിൽ സംഭരിച്ച ഡാറ്റ നീക്കംചെയ്യുന്നു)
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
ഓപ്ഷനുകൾ
ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴിയോ JavaScript വഴിയോ ഓപ്ഷനുകൾ കൈമാറാൻ കഴിയും. data-bs-ഡാറ്റ ആട്രിബ്യൂട്ടുകൾക്കായി, എന്നതിലെന്നപോലെ ഓപ്ഷന്റെ പേര് ചേർക്കുക data-bs-offset="".
| പേര് | ടൈപ്പ് ചെയ്യുക | സ്ഥിരസ്ഥിതി | വിവരണം |
|---|---|---|---|
offset |
നമ്പർ | 10 |
സ്ക്രോളിന്റെ സ്ഥാനം കണക്കാക്കുമ്പോൾ മുകളിൽ നിന്ന് ഓഫ്സെറ്റ് ചെയ്യേണ്ട പിക്സലുകൾ. |
method |
സ്ട്രിംഗ് | auto |
സ്‌പൈഡ് എലമെന്റ് ഏത് വിഭാഗത്തിലാണെന്ന് കണ്ടെത്തുന്നു. autoസ്ക്രോൾ കോർഡിനേറ്റുകൾ ലഭിക്കുന്നതിനുള്ള മികച്ച രീതി തിരഞ്ഞെടുക്കും. സ്ക്രോൾ കോർഡിനേറ്റുകൾ ലഭിക്കുന്നതിന് ഈ രീതി offsetഉപയോഗിക്കും . സ്ക്രോൾ കോർഡിനേറ്റുകൾ ലഭിക്കുന്നതിന് പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കും .Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft |
target |
ചരട് | jQuery വസ്തു | DOM ഘടകം | Scrollspy പ്ലഗിൻ പ്രയോഗിക്കുന്നതിനുള്ള ഘടകം വ്യക്തമാക്കുന്നു. |
സംഭവങ്ങൾ
| ഇവന്റ് തരം | വിവരണം |
|---|---|
activate.bs.scrollspy |
സ്ക്രോൾസ്പി ഒരു പുതിയ ഇനം സജീവമാക്കുമ്പോഴെല്ലാം ഈ ഇവന്റ് സ്ക്രോൾ എലമെന്റിൽ പ്രവർത്തിക്കുന്നു. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})