រមូរ
ធ្វើបច្ចុប្បន្នភាពការរុករក Bootstrap ដោយស្វ័យប្រវត្តិ ឬរាយបញ្ជីសមាសធាតុក្រុមដោយផ្អែកលើទីតាំងរមូរ ដើម្បីបង្ហាញថាបច្ចុប្បន្នតំណមួយណាសកម្មនៅក្នុងច្រកមើល។
របៀបដែលវាដំណើរការ
Scrollspy បិទបើក .activeថ្នាក់នៅលើធាតុយុថ្កា ( <a>) នៅពេលដែលធាតុដែលមាន idសេចក្តីយោងដោយយុថ្កា hrefត្រូវបានរមូរចូលទៅក្នុងទិដ្ឋភាព។ Scrollspy ត្រូវបានប្រើយ៉ាងល្អបំផុតក្នុងការភ្ជាប់ជាមួយនឹង Bootstrap nav component ឬ ក្រុមបញ្ជី ប៉ុន្តែវាក៏នឹងដំណើរការជាមួយនឹងធាតុយុថ្កាក្នុងទំព័របច្ចុប្បន្នដែរ។ នេះជារបៀបដែលវាដំណើរការ។
-
ដើម្បីចាប់ផ្តើម scrollspy ទាមទាររឿងពីរ៖ ការរុករក ក្រុមបញ្ជី ឬសំណុំតំណសាមញ្ញ បូកនឹងធុងដែលអាចរមូរបាន។ កុងតឺន័រដែលអាចរមូរបានអាចជា
<body>ឬជាធាតុផ្ទាល់ខ្លួនដែលមានសំណុំheightនិងoverflow-y: scroll. -
នៅលើកុងតឺន័រដែលអាចរមូរបាន សូមបន្ថែម
data-bs-spy="scroll"និងdata-bs-target="#navId"កន្លែងដែលnavIdជាលក្ខណៈពិសេសidនៃការរុករកដែលពាក់ព័ន្ធ។ ត្រូវប្រាកដថារួមបញ្ចូលផងដែរtabindex="0"ដើម្បីធានាការចូលប្រើក្តារចុច។ -
នៅពេលអ្នករមូរកុងតឺន័រ "ឈ្លបយកការណ៍"
.activeថ្នាក់មួយត្រូវបានបន្ថែម និងដកចេញពីតំណយុថ្កានៅក្នុងកម្មវិធីរុករកដែលពាក់ព័ន្ធ។ តំណភ្ជាប់ត្រូវតែមានidគោលដៅដែលអាចដោះស្រាយបាន បើមិនដូច្នេះទេ ពួកវាមិនត្រូវបានអើពើ។ ឧទាហរណ៍<a href="#home">home</a>ត្រូវតែឆ្លើយតបទៅនឹងអ្វីមួយនៅក្នុង DOM ដូចជា<div id="home"></div> -
ធាតុគោលដៅដែលមិនអាចមើលឃើញនឹងត្រូវមិនអើពើ។ សូម មើលផ្នែក ធាតុមិនអាចមើលឃើញ ខាងក្រោម។
ឧទាហរណ៍
Navbar
រមូរតំបន់ខាងក្រោមរបាររុករក ហើយមើលការផ្លាស់ប្តូរថ្នាក់សកម្ម។ បើកម៉ឺនុយទម្លាក់ចុះ ហើយមើលធាតុទម្លាក់ចុះត្រូវបានបន្លិចផងដែរ។
ចំណងជើងដំបូង
នេះគឺជាមាតិកាកន្លែងដាក់មួយចំនួនសម្រាប់ទំព័ររមូរ។ ចំណាំថានៅពេលអ្នករមូរចុះក្រោមទំព័រ តំណរុករកដែលសមរម្យត្រូវបានបន្លិច។ វាត្រូវបានធ្វើម្តងទៀតនៅទូទាំងឧទាហរណ៍នៃសមាសភាគ។ យើងបន្តបន្ថែមការចម្លងឧទាហរណ៍មួយចំនួនទៀតនៅទីនេះ ដើម្បីបញ្ជាក់ពីការរមូរ និងការបន្លិច។
ចំណងជើងទីពីរ
នេះគឺជាមាតិកាកន្លែងដាក់មួយចំនួនសម្រាប់ទំព័ររមូរ។ ចំណាំថានៅពេលអ្នករមូរចុះក្រោមទំព័រ តំណរុករកដែលសមរម្យត្រូវបានបន្លិច។ វាត្រូវបានធ្វើម្តងទៀតនៅទូទាំងឧទាហរណ៍នៃសមាសភាគ។ យើងបន្តបន្ថែមការចម្លងឧទាហរណ៍មួយចំនួនទៀតនៅទីនេះ ដើម្បីបញ្ជាក់ពីការរមូរ និងការបន្លិច។
ចំណងជើងទីបី
នេះគឺជាមាតិកាកន្លែងដាក់មួយចំនួនសម្រាប់ទំព័ររមូរ។ ចំណាំថានៅពេលអ្នករមូរចុះក្រោមទំព័រ តំណរុករកដែលសមរម្យត្រូវបានបន្លិច។ វាត្រូវបានធ្វើម្តងទៀតនៅទូទាំងឧទាហរណ៍នៃសមាសភាគ។ យើងបន្តបន្ថែមការចម្លងឧទាហរណ៍មួយចំនួនទៀតនៅទីនេះ ដើម្បីបញ្ជាក់ពីការរមូរ និងការបន្លិច។
ក្បាលទីបួន
នេះគឺជាមាតិកាកន្លែងដាក់មួយចំនួនសម្រាប់ទំព័ររមូរ។ ចំណាំថានៅពេលអ្នករមូរចុះក្រោមទំព័រ តំណរុករកដែលសមរម្យត្រូវបានបន្លិច។ វាត្រូវបានធ្វើម្តងទៀតនៅទូទាំងឧទាហរណ៍នៃសមាសភាគ។ យើងបន្តបន្ថែមការចម្លងឧទាហរណ៍មួយចំនួនទៀតនៅទីនេះ ដើម្បីបញ្ជាក់ពីការរមូរ និងការបន្លិច។
ក្បាលទីប្រាំ
នេះគឺជាមាតិកាកន្លែងដាក់មួយចំនួនសម្រាប់ទំព័ររមូរ។ ចំណាំថានៅពេលអ្នករមូរចុះក្រោមទំព័រ តំណរុករកដែលសមរម្យត្រូវបានបន្លិច។ វាត្រូវបានធ្វើម្តងទៀតនៅទូទាំងឧទាហរណ៍នៃសមាសភាគ។ យើងបន្តបន្ថែមការចម្លងឧទាហរណ៍មួយចំនួនទៀតនៅទីនេះ ដើម្បីបញ្ជាក់ពីការរមូរ និងការបន្លិច។
<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>
Nested nav
Scrollspy ក៏ដំណើរការជាមួយ nested .navs ។ ប្រសិនបើសំបុក .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-groups ។ រមូរតំបន់នៅជាប់ក្រុមបញ្ជី ហើយមើលការផ្លាស់ប្ដូរថ្នាក់សកម្ម។
ធាតុ 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 មិនត្រូវបានកំណត់ចំពោះសមាសធាតុ nav និងក្រុមបញ្ជីទេ ដូច្នេះវានឹងដំណើរការលើ <a>ធាតុយុថ្កាណាមួយនៅក្នុងឯកសារបច្ចុប្បន្ន។ រមូរតំបន់ ហើយមើលការ .activeផ្លាស់ប្តូរថ្នាក់។
ធាតុ 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ថ្នាក់ទេ។ Scrollspy instances ដែលបានចាប់ផ្តើមនៅក្នុង wrapper ដែលមិនអាចមើលឃើញនឹងមិនអើពើធាតុគោលដៅទាំងអស់។ ប្រើ 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សមាសធាតុ Bootstrap ណាមួយ។
<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}". ត្រូវប្រាកដថាផ្លាស់ប្តូរប្រភេទករណីនៃឈ្មោះជម្រើសពី " camelCase " ទៅ " kebab-case " នៅពេលឆ្លងកាត់ជម្រើសតាមរយៈគុណលក្ខណៈទិន្នន័យ។ ឧទាហរណ៍ ប្រើ data-bs-custom-class="beautifier"ជំនួស data-bs-customClass="beautifier".
ចាប់ពី Bootstrap 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% |
ប្រសព្វ Observer rootMargin ឯកតាត្រឹមត្រូវ នៅពេលគណនាទីតាំងរមូរ។ |
smoothScroll |
ប៊ូលីន | false |
បើកដំណើរការការរមូរដោយរលូននៅពេលដែលអ្នកប្រើចុចលើតំណដែលសំដៅទៅលើ ScrollSpy អាចសង្កេតបាន។ |
target |
ខ្សែអក្សរ ធាតុ DOM | null |
បញ្ជាក់ធាតុដើម្បីអនុវត្តកម្មវិធីជំនួយ Scrollspy ។ |
threshold |
អារេ | [0.1, 0.5, 1] |
IntersectionObserver កម្រិត បញ្ចូលត្រឹមត្រូវ នៅពេលគណនាទីតាំងរមូរ។ |
ជម្រើសដែលបានបដិសេធ
រហូតដល់ v5.1.3 យើងកំពុងប្រើ offset& methodជម្រើស ដែលឥឡូវនេះត្រូវបានបដិសេធ និងជំនួសដោយ rootMargin. ដើម្បីរក្សាភាពឆបគ្នាថយក្រោយ យើងនឹងបន្តញែកធាតុដែលបានផ្តល់ offsetឱ្យ rootMarginប៉ុន្តែលក្ខណៈពិសេសនេះនឹងត្រូវបានដកចេញនៅក្នុង v6 ។
វិធីសាស្រ្ត
| វិធីសាស្រ្ត | ការពិពណ៌នា |
|---|---|
dispose |
បំផ្លាញ scrollspy របស់ធាតុមួយ។ (លុបទិន្នន័យដែលបានរក្សាទុកនៅលើធាតុ DOM) |
getInstance |
វិធីសាស្រ្ត ឋិតិវន្ត ដើម្បីទទួលបានវត្ថុ scrollspy ដែលភ្ជាប់ជាមួយធាតុ DOM ។ |
getOrCreateInstance |
វិធីសាស្ត្រ ឋិតិវន្ត ដើម្បីទទួលបានវត្ថុ scrollspy ដែលភ្ជាប់ជាមួយធាតុ DOM ឬដើម្បីបង្កើតថ្មីមួយ ក្នុងករណីដែលវាមិនត្រូវបានចាប់ផ្តើម។ |
refresh |
នៅពេលបន្ថែម ឬលុបធាតុនៅក្នុង DOM អ្នកនឹងត្រូវហៅវិធីសាស្ត្រធ្វើឱ្យស្រស់។ |
នេះជាឧទាហរណ៍ដោយប្រើវិធីធ្វើឱ្យស្រស់៖
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
ព្រឹត្តិការណ៍
| ព្រឹត្តិការណ៍ | ការពិពណ៌នា |
|---|---|
activate.bs.scrollspy |
ព្រឹត្តិការណ៍នេះឆេះនៅលើធាតុរមូរ នៅពេលណាដែលយុថ្កាត្រូវបានធ្វើឱ្យសកម្មដោយ scrollspy ។ |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})