പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്സ് നാവിഗേഷനിലേക്ക് പോകുക
Check
in English

സ്ക്രോൾസ്പി

ബൂട്ട്‌സ്‌ട്രാപ്പ് നാവിഗേഷൻ സ്വയമേവ അപ്‌ഡേറ്റ് ചെയ്യുക അല്ലെങ്കിൽ വ്യൂപോർട്ടിൽ നിലവിൽ ഏത് ലിങ്ക് സജീവമാണെന്ന് സൂചിപ്പിക്കാൻ സ്ക്രോൾ സ്ഥാനത്തെ അടിസ്ഥാനമാക്കി ഗ്രൂപ്പ് ഘടകങ്ങൾ ലിസ്റ്റ് ചെയ്യുക.

ഈ പേജിൽ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

.activeസ്ക്രോൾസ്പി ആങ്കർ ( <a>) ഘടകങ്ങളിൽ ക്ലാസ് ടോഗിൾ ചെയ്യുന്നു id, ആങ്കർ റഫറൻസ് ചെയ്ത മൂലകം hrefകാഴ്ചയിലേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ. ഒരു ബൂട്ട്‌സ്‌ട്രാപ്പ് nav ഘടകവുമായോ ലിസ്റ്റ് ഗ്രൂപ്പുമായോ സംയോജിപ്പിച്ചാണ് സ്‌ക്രോൾസ്പി ഏറ്റവും നന്നായി ഉപയോഗിക്കുന്നത് , എന്നാൽ നിലവിലെ പേജിലെ ഏതെങ്കിലും ആങ്കർ ഘടകങ്ങളുമായി ഇത് പ്രവർത്തിക്കും. ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നത് ഇതാ.

  • ആരംഭിക്കുന്നതിന്, സ്ക്രോൾസ്പിക്ക് രണ്ട് കാര്യങ്ങൾ ആവശ്യമാണ്: ഒരു നാവിഗേഷൻ, ലിസ്റ്റ് ഗ്രൂപ്പ് അല്ലെങ്കിൽ ഒരു ലളിതമായ ലിങ്കുകൾ, കൂടാതെ ഒരു സ്ക്രോൾ ചെയ്യാവുന്ന കണ്ടെയ്നർ. സ്ക്രോൾ ചെയ്യാവുന്ന കണ്ടെയ്നർ ഒരു <body>സെറ്റും height.overflow-y: scroll

  • സ്ക്രോൾ ചെയ്യാവുന്ന കണ്ടെയ്നറിൽ, data-bs-spy="scroll"അനുബന്ധ നാവിഗേഷന്റെ തനത് data-bs-target="#navId"എവിടെയാണ് ചേർക്കുക. കീബോർഡ് ആക്സസ് ഉറപ്പാക്കാൻ ഒരു ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക.navIdidtabindex="0"

  • നിങ്ങൾ "സ്പൈഡ്" കണ്ടെയ്നർ സ്ക്രോൾ ചെയ്യുമ്പോൾ .active, അനുബന്ധ നാവിഗേഷനിലെ ആങ്കർ ലിങ്കുകളിൽ നിന്ന് ഒരു ക്ലാസ് ചേർക്കുകയും നീക്കം ചെയ്യുകയും ചെയ്യുന്നു. ലിങ്കുകൾക്ക് പരിഹരിക്കാവുന്ന idലക്ഷ്യങ്ങൾ ഉണ്ടായിരിക്കണം, അല്ലാത്തപക്ഷം അവ അവഗണിക്കപ്പെടും. ഉദാഹരണത്തിന്, <a href="#home">home</a>DOM-ലെ എന്തെങ്കിലും പോലെ ആയിരിക്കണം<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>

നെസ്റ്റഡ് നവ്

Scrollspy നെസ്റ്റഡ് എസിനൊപ്പം പ്രവർത്തിക്കുന്നു .nav. ഒരു നെസ്റ്റ് .navആണെങ്കിൽ .active, അതിന്റെ മാതാപിതാക്കളും ആയിരിക്കും .active. നവ്ബാറിന് അടുത്തുള്ള ഏരിയ സ്ക്രോൾ ചെയ്ത് സജീവമായ ക്ലാസ് മാറ്റം കാണുക.

ഇനം 1

സ്ക്രോൾസ്പൈ പേജിനുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉചിതമായ നാവിഗേഷൻ ലിങ്ക് ഹൈലൈറ്റ് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഘടക ഉദാഹരണത്തിലുടനീളം ഇത് ആവർത്തിക്കുന്നു. സ്ക്രോളിംഗും ഹൈലൈറ്റിംഗും ഊന്നിപ്പറയുന്നതിന് ഞങ്ങൾ ചില ഉദാഹരണങ്ങൾ ഇവിടെ ചേർക്കുന്നു.

JavaScript പ്ലഗിൻ ദൃശ്യമായേക്കാവുന്ന എല്ലാ ഘടകങ്ങളിൽ നിന്നും ശരിയായ ഘടകം തിരഞ്ഞെടുക്കാൻ ശ്രമിക്കുന്നുവെന്നത് ഓർക്കുക. ഒരേ സമയം ദൃശ്യമാകുന്ന ഒന്നിലധികം സ്ക്രോൾസ്പൈ ടാർഗെറ്റുകൾ ചില പ്രശ്നങ്ങൾക്ക് കാരണമായേക്കാം.

ഇനം 1-1

സ്ക്രോൾസ്പൈ പേജിനുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉചിതമായ നാവിഗേഷൻ ലിങ്ക് ഹൈലൈറ്റ് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഘടക ഉദാഹരണത്തിലുടനീളം ഇത് ആവർത്തിക്കുന്നു. സ്ക്രോളിംഗും ഹൈലൈറ്റിംഗും ഊന്നിപ്പറയുന്നതിന് ഞങ്ങൾ ചില ഉദാഹരണങ്ങൾ ഇവിടെ ചേർക്കുന്നു.

JavaScript പ്ലഗിൻ ദൃശ്യമായേക്കാവുന്ന എല്ലാ ഘടകങ്ങളിൽ നിന്നും ശരിയായ ഘടകം തിരഞ്ഞെടുക്കാൻ ശ്രമിക്കുന്നുവെന്നത് ഓർക്കുക. ഒരേ സമയം ദൃശ്യമാകുന്ന ഒന്നിലധികം സ്ക്രോൾസ്പൈ ടാർഗെറ്റുകൾ ചില പ്രശ്നങ്ങൾക്ക് കാരണമായേക്കാം.

ഇനം 1-2

സ്ക്രോൾസ്പൈ പേജിനുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉചിതമായ നാവിഗേഷൻ ലിങ്ക് ഹൈലൈറ്റ് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഘടക ഉദാഹരണത്തിലുടനീളം ഇത് ആവർത്തിക്കുന്നു. സ്ക്രോളിംഗും ഹൈലൈറ്റിംഗും ഊന്നിപ്പറയുന്നതിന് ഞങ്ങൾ ചില ഉദാഹരണങ്ങൾ ഇവിടെ ചേർക്കുന്നു.

JavaScript പ്ലഗിൻ ദൃശ്യമായേക്കാവുന്ന എല്ലാ ഘടകങ്ങളിൽ നിന്നും ശരിയായ ഘടകം തിരഞ്ഞെടുക്കാൻ ശ്രമിക്കുന്നുവെന്നത് ഓർക്കുക. ഒരേ സമയം ദൃശ്യമാകുന്ന ഒന്നിലധികം സ്ക്രോൾസ്പൈ ടാർഗെറ്റുകൾ ചില പ്രശ്നങ്ങൾക്ക് കാരണമായേക്കാം.

ഇനം 2

സ്ക്രോൾസ്പൈ പേജിനുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉചിതമായ നാവിഗേഷൻ ലിങ്ക് ഹൈലൈറ്റ് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഘടക ഉദാഹരണത്തിലുടനീളം ഇത് ആവർത്തിക്കുന്നു. സ്ക്രോളിംഗും ഹൈലൈറ്റിംഗും ഊന്നിപ്പറയുന്നതിന് ഞങ്ങൾ ചില ഉദാഹരണങ്ങൾ ഇവിടെ ചേർക്കുന്നു.

JavaScript പ്ലഗിൻ ദൃശ്യമായേക്കാവുന്ന എല്ലാ ഘടകങ്ങളിൽ നിന്നും ശരിയായ ഘടകം തിരഞ്ഞെടുക്കാൻ ശ്രമിക്കുന്നുവെന്നത് ഓർക്കുക. ഒരേ സമയം ദൃശ്യമാകുന്ന ഒന്നിലധികം സ്ക്രോൾസ്പൈ ടാർഗെറ്റുകൾ ചില പ്രശ്നങ്ങൾക്ക് കാരണമായേക്കാം.

ഇനം 3

സ്ക്രോൾസ്പൈ പേജിനുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉചിതമായ നാവിഗേഷൻ ലിങ്ക് ഹൈലൈറ്റ് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഘടക ഉദാഹരണത്തിലുടനീളം ഇത് ആവർത്തിക്കുന്നു. സ്ക്രോളിംഗും ഹൈലൈറ്റിംഗും ഊന്നിപ്പറയുന്നതിന് ഞങ്ങൾ ചില ഉദാഹരണങ്ങൾ ഇവിടെ ചേർക്കുന്നു.

JavaScript പ്ലഗിൻ ദൃശ്യമായേക്കാവുന്ന എല്ലാ ഘടകങ്ങളിൽ നിന്നും ശരിയായ ഘടകം തിരഞ്ഞെടുക്കാൻ ശ്രമിക്കുന്നുവെന്നത് ഓർക്കുക. ഒരേ സമയം ദൃശ്യമാകുന്ന ഒന്നിലധികം സ്ക്രോൾസ്പൈ ടാർഗെറ്റുകൾ ചില പ്രശ്നങ്ങൾക്ക് കാരണമായേക്കാം.

ഇനം 3-1

സ്ക്രോൾസ്പൈ പേജിനുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉചിതമായ നാവിഗേഷൻ ലിങ്ക് ഹൈലൈറ്റ് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഘടക ഉദാഹരണത്തിലുടനീളം ഇത് ആവർത്തിക്കുന്നു. സ്ക്രോളിംഗും ഹൈലൈറ്റിംഗും ഊന്നിപ്പറയുന്നതിന് ഞങ്ങൾ ചില ഉദാഹരണങ്ങൾ ഇവിടെ ചേർക്കുന്നു.

JavaScript പ്ലഗിൻ ദൃശ്യമായേക്കാവുന്ന എല്ലാ ഘടകങ്ങളിൽ നിന്നും ശരിയായ ഘടകം തിരഞ്ഞെടുക്കാൻ ശ്രമിക്കുന്നുവെന്നത് ഓർക്കുക. ഒരേ സമയം ദൃശ്യമാകുന്ന ഒന്നിലധികം സ്ക്രോൾസ്പൈ ടാർഗെറ്റുകൾ ചില പ്രശ്നങ്ങൾക്ക് കാരണമായേക്കാം.

ഇനം 3-2

സ്ക്രോൾസ്പൈ പേജിനുള്ള ചില പ്ലെയ്‌സ്‌ഹോൾഡർ ഉള്ളടക്കമാണിത്. നിങ്ങൾ പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ, ഉചിതമായ നാവിഗേഷൻ ലിങ്ക് ഹൈലൈറ്റ് ചെയ്യപ്പെടുമെന്നത് ശ്രദ്ധിക്കുക. ഘടക ഉദാഹരണത്തിലുടനീളം ഇത് ആവർത്തിക്കുന്നു. സ്ക്രോളിംഗും ഹൈലൈറ്റിംഗും ഊന്നിപ്പറയുന്നതിന് ഞങ്ങൾ ചില ഉദാഹരണങ്ങൾ ഇവിടെ ചേർക്കുന്നു.

JavaScript പ്ലഗിൻ ദൃശ്യമായേക്കാവുന്ന എല്ലാ ഘടകങ്ങളിൽ നിന്നും ശരിയായ ഘടകം തിരഞ്ഞെടുക്കാൻ ശ്രമിക്കുന്നുവെന്നത് ഓർക്കുക. ഒരേ സമയം ദൃശ്യമാകുന്ന ഒന്നിലധികം സ്ക്രോൾസ്പൈ ടാർഗെറ്റുകൾ ചില പ്രശ്നങ്ങൾക്ക് കാരണമായേക്കാം.

<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-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>

ലളിതമായ ആങ്കർമാർ

Scrollspy നാവിക ഘടകങ്ങളിലേക്കും ലിസ്റ്റ് ഗ്രൂപ്പുകളിലേക്കും മാത്രമായി പരിമിതപ്പെടുത്തിയിട്ടില്ല, അതിനാൽ <a>നിലവിലെ പ്രമാണത്തിലെ ഏതെങ്കിലും ആങ്കർ ഘടകങ്ങളിൽ ഇത് പ്രവർത്തിക്കും. പ്രദേശം സ്ക്രോൾ ചെയ്‌ത് .activeക്ലാസ് മാറുന്നത് കാണുക.

ഇനം 1 ഇനം 2 ഇനം 3 ഇനം 4 ഇനം 5

ഇനം 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>

JavaScript വഴി

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

ഓപ്ഷനുകൾ

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ അല്ലെങ്കിൽ JavaScript വഴി ഓപ്‌ഷനുകൾ കൈമാറാൻ കഴിയുന്നതിനാൽ, എന്നതിലെന്നപോലെ നിങ്ങൾക്ക് ഒരു ഓപ്‌ഷൻ നാമം data-bs-ചേർക്കാം data-bs-animation="{value}". ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ വഴി ഓപ്‌ഷനുകൾ കൈമാറുമ്പോൾ, ഓപ്‌ഷൻ പേരിന്റെ കേസ് തരം “ഒട്ടകം” എന്നതിൽ നിന്ന് “കബാബ്-കേസ്” ആയി മാറ്റുന്നത് ഉറപ്പാക്കുക . ഉദാഹരണത്തിന്, 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% സ്ക്രോൾ സ്ഥാനം കണക്കാക്കുമ്പോൾ ഇന്റർസെക്ഷൻ ഒബ്സർവർ റൂട്ട് മാർജിൻ സാധുവായ യൂണിറ്റുകൾ.
smoothScroll ബൂളിയൻ false ഒരു ഉപയോക്താവ് ScrollSpy നിരീക്ഷണങ്ങളെ പരാമർശിക്കുന്ന ഒരു ലിങ്കിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ സുഗമമായ സ്ക്രോളിംഗ് പ്രവർത്തനക്ഷമമാക്കുന്നു.
target സ്ട്രിംഗ്, DOM ഘടകം null Scrollspy പ്ലഗിൻ പ്രയോഗിക്കുന്നതിനുള്ള ഘടകം വ്യക്തമാക്കുന്നു.
threshold അറേ [0.1, 0.5, 1] IntersectionObserver സ്ക്രോൾ സ്ഥാനം കണക്കാക്കുമ്പോൾ ത്രെഷോൾഡ് സാധുവായ ഇൻപുട്ട്.

ഒഴിവാക്കിയ ഓപ്ഷനുകൾ

v5.1.3 വരെ ഞങ്ങൾ ഉപയോഗിക്കുന്ന offset& methodഓപ്‌ഷനുകൾ, അവ ഇപ്പോൾ ഒഴിവാക്കി മാറ്റി പകരം വയ്ക്കുന്നു rootMargin. ബാക്ക്വേർഡ് കോംപാറ്റിബിളിറ്റി നിലനിർത്താൻ, ഞങ്ങൾ നൽകിയത് പാഴ്സ് ചെയ്യുന്നത് തുടരും offset, എന്നാൽ ഈ ഫീച്ചർ v6-rootMargin ൽ നീക്കം ചെയ്യപ്പെടും .

രീതികൾ

രീതി വിവരണം
dispose ഒരു മൂലകത്തിന്റെ സ്ക്രോൾസ്പൈ നശിപ്പിക്കുന്നു. (DOM ഘടകത്തിൽ സംഭരിച്ച ഡാറ്റ നീക്കംചെയ്യുന്നു)
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...
})