ஸ்க்ரோல்ஸ்பி
வியூபோர்ட்டில் தற்போது எந்த இணைப்பு செயலில் உள்ளது என்பதைக் குறிக்க, பூட்ஸ்டார்ப் வழிசெலுத்தலைத் தானாகப் புதுப்பிக்கவும் அல்லது உருட்டும் நிலையின் அடிப்படையில் குழு கூறுகளை பட்டியலிடவும்.
எப்படி இது செயல்படுகிறது
Scrollspy ஆனது, ஆங்கரால் குறிப்பிடப்பட்ட உறுப்பு காட்சிக்கு உருட்டப்படும்போது .active, ஆங்கர் ( <a>) உறுப்புகளில் வகுப்பை மாற்றுகிறது . பூட்ஸ்டார்ப் நேவ் கூறு அல்லது பட்டியல் குழுவுடன் இணைந்து ஸ்க்ரோல்ஸ்பை சிறப்பாகப் பயன்படுத்தப்படுகிறது , ஆனால் இது தற்போதைய பக்கத்தில் உள்ள எந்த ஆங்கர் உறுப்புகளிலும் வேலை செய்யும். இது எவ்வாறு செயல்படுகிறது என்பது இங்கே.idhref
-
தொடங்குவதற்கு, scrollspyக்கு இரண்டு விஷயங்கள் தேவை: வழிசெலுத்தல், பட்டியல் குழு அல்லது எளிய இணைப்புகளின் தொகுப்பு, மேலும் உருட்டக்கூடிய கொள்கலன். ஸ்க்ரோல் செய்யக்கூடிய கன்டெய்னர்
<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> -
கண்ணுக்குத் தெரியாத இலக்கு கூறுகள் புறக்கணிக்கப்படும். கீழே காணப்படாத கூறுகள் பகுதியைப் பார்க்கவும் .
எடுத்துக்காட்டுகள்
நவ்பார்
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>
உள்ளமைக்கப்பட்ட நாவ்
.navஸ்க்ரோல்ஸ்பை உள்ளமை s உடன் வேலை செய்கிறது . கூடு கட்டப்பட்டிருந்தால் .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>
பட்டியல் குழு
.list-groupScrollspy s உடன் வேலை செய்கிறது . பட்டியல் குழுவிற்கு அடுத்துள்ள பகுதியை ஸ்க்ரோல் செய்து செயலில் உள்ள வகுப்பு மாற்றத்தைப் பார்க்கவும்.
பொருள் 1
இது scrollspy பக்கத்திற்கான சில ஒதுக்கிட உள்ளடக்கமாகும். நீங்கள் பக்கத்தை கீழே ஸ்க்ரோல் செய்யும் போது, பொருத்தமான வழிசெலுத்தல் இணைப்பு முன்னிலைப்படுத்தப்படும் என்பதை நினைவில் கொள்ளவும். கூறு உதாரணம் முழுவதும் இது மீண்டும் மீண்டும் செய்யப்படுகிறது. ஸ்க்ரோலிங் மற்றும் ஹைலைட் செய்வதை வலியுறுத்த இன்னும் சில எடுத்துக்காட்டு நகலை இங்கே சேர்த்து வருகிறோம்.
பொருள் 2
இது scrollspy பக்கத்திற்கான சில ஒதுக்கிட உள்ளடக்கமாகும். நீங்கள் பக்கத்தை கீழே ஸ்க்ரோல் செய்யும் போது, பொருத்தமான வழிசெலுத்தல் இணைப்பு முன்னிலைப்படுத்தப்படும் என்பதை நினைவில் கொள்ளவும். கூறு உதாரணம் முழுவதும் இது மீண்டும் மீண்டும் செய்யப்படுகிறது. ஸ்க்ரோலிங் மற்றும் ஹைலைட் செய்வதை வலியுறுத்த இன்னும் சில எடுத்துக்காட்டு நகலை இங்கே சேர்த்து வருகிறோம்.
பொருள் 3
இது scrollspy பக்கத்திற்கான சில ஒதுக்கிட உள்ளடக்கமாகும். நீங்கள் பக்கத்தை கீழே ஸ்க்ரோல் செய்யும் போது, பொருத்தமான வழிசெலுத்தல் இணைப்பு முன்னிலைப்படுத்தப்படும் என்பதை நினைவில் கொள்ளவும். கூறு உதாரணம் முழுவதும் இது மீண்டும் மீண்டும் செய்யப்படுகிறது. ஸ்க்ரோலிங் மற்றும் ஹைலைட் செய்வதை வலியுறுத்த இன்னும் சில எடுத்துக்காட்டு நகலை இங்கே சேர்த்து வருகிறோம்.
பொருள் 4
இது 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>தற்போதைய ஆவணத்தில் உள்ள எந்த ஆங்கர் உறுப்புகளிலும் வேலை செய்யும். பகுதியை ஸ்க்ரோல் செய்து .activeவகுப்பு மாற்றத்தைப் பார்க்கவும்.
பொருள் 1
இது scrollspy பக்கத்திற்கான சில ஒதுக்கிட உள்ளடக்கமாகும். நீங்கள் பக்கத்தை கீழே ஸ்க்ரோல் செய்யும் போது, பொருத்தமான வழிசெலுத்தல் இணைப்பு முன்னிலைப்படுத்தப்படும் என்பதை நினைவில் கொள்ளவும். கூறு உதாரணம் முழுவதும் இது மீண்டும் மீண்டும் செய்யப்படுகிறது. ஸ்க்ரோலிங் மற்றும் ஹைலைட் செய்வதை வலியுறுத்த இன்னும் சில எடுத்துக்காட்டு நகலை இங்கே சேர்த்து வருகிறோம்.
பொருள் 2
இது scrollspy பக்கத்திற்கான சில ஒதுக்கிட உள்ளடக்கமாகும். நீங்கள் பக்கத்தை கீழே ஸ்க்ரோல் செய்யும் போது, பொருத்தமான வழிசெலுத்தல் இணைப்பு முன்னிலைப்படுத்தப்படும் என்பதை நினைவில் கொள்ளவும். கூறு உதாரணம் முழுவதும் இது மீண்டும் மீண்டும் செய்யப்படுகிறது. ஸ்க்ரோலிங் மற்றும் ஹைலைட் செய்வதை வலியுறுத்த இன்னும் சில எடுத்துக்காட்டு நகலை இங்கே சேர்த்து வருகிறோம்.
பொருள் 3
இது scrollspy பக்கத்திற்கான சில ஒதுக்கிட உள்ளடக்கமாகும். நீங்கள் பக்கத்தை கீழே ஸ்க்ரோல் செய்யும் போது, பொருத்தமான வழிசெலுத்தல் இணைப்பு முன்னிலைப்படுத்தப்படும் என்பதை நினைவில் கொள்ளவும். கூறு உதாரணம் முழுவதும் இது மீண்டும் மீண்டும் செய்யப்படுகிறது. ஸ்க்ரோலிங் மற்றும் ஹைலைட் செய்வதை வலியுறுத்த இன்னும் சில எடுத்துக்காட்டு நகலை இங்கே சேர்த்து வருகிறோம்.
பொருள் 4
இது scrollspy பக்கத்திற்கான சில ஒதுக்கிட உள்ளடக்கமாகும். நீங்கள் பக்கத்தை கீழே ஸ்க்ரோல் செய்யும் போது, பொருத்தமான வழிசெலுத்தல் இணைப்பு முன்னிலைப்படுத்தப்படும் என்பதை நினைவில் கொள்ளவும். கூறு உதாரணம் முழுவதும் இது மீண்டும் மீண்டும் செய்யப்படுகிறது. ஸ்க்ரோலிங் மற்றும் ஹைலைட் செய்வதை வலியுறுத்த இன்னும் சில எடுத்துக்காட்டு நகலை இங்கே சேர்த்து வருகிறோம்.
பொருள் 5
இது 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>
கண்ணுக்குத் தெரியாத கூறுகள்
.activeகண்ணுக்குத் தெரியாத இலக்கு கூறுகள் புறக்கணிக்கப்படும் மேலும் அவற்றுடன் தொடர்புடைய nav உருப்படிகள் வகுப்பைப் பெறாது . காணாத ரேப்பரில் துவக்கப்பட்ட ஸ்க்ரோல்ஸ்பை நிகழ்வுகள் அனைத்து இலக்கு கூறுகளையும் புறக்கணிக்கும். 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>
ஜாவாஸ்கிரிப்ட் வழியாக
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
விருப்பங்கள்
தரவு பண்புக்கூறுகள் அல்லது ஜாவாஸ்கிரிப்ட் வழியாக விருப்பங்களை அனுப்ப முடியும் என்பதால், இல் உள்ளதைப் போல விருப்பப் பெயரை நீங்கள் data-bs-சேர்க்கலாம் data-bs-animation="{value}". தரவு பண்புக்கூறுகள் வழியாக விருப்பங்களை அனுப்பும் போது, " camelCase " என்பதிலிருந்து " kebab-case " என்ற விருப்பப் பெயரின் கேஸ் வகையை மாற்றுவதை உறுதிசெய்யவும் . எடுத்துக்காட்டாக, க்கு 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, ஆனால் இந்த அம்சம் v6rootMargin இல் அகற்றப்படும் .
முறைகள்
| முறை | விளக்கம் |
|---|---|
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...
})