រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
in English

រមូរ

ធ្វើបច្ចុប្បន្នភាពការរុករក Bootstrap ដោយស្វ័យប្រវត្តិ ឬរាយបញ្ជីសមាសធាតុក្រុមដោយផ្អែកលើទីតាំងរមូរ ដើម្បីបង្ហាញថាបច្ចុប្បន្នតំណមួយណាសកម្មនៅក្នុងច្រកមើល។

នៅលើទំព័រនេះ។

របៀបដែលវាដំណើរការ

Scrollspy មានតម្រូវការមួយចំនួនដើម្បីដំណើរការបានត្រឹមត្រូវ៖

  • វាត្រូវតែប្រើនៅលើ សមាសភាគ Bootstrap nav ឬ ក្រុមបញ្ជី ។
  • Scrollspy ទាមទារ position: relative;លើធាតុដែលអ្នកកំពុងចារកម្ម ជាធម្មតា <body>.
  • យុថ្កា ( <a>) ត្រូវបានទាមទារ ហើយត្រូវតែចង្អុលទៅធាតុជាមួយនោះ id។

នៅពេលអនុវត្តដោយជោគជ័យ ក្រុម nav ឬបញ្ជីរបស់អ្នកនឹងធ្វើបច្ចុប្បន្នភាពទៅតាមនោះ ដោយផ្លាស់ទី .activeថ្នាក់ពីធាតុមួយទៅធាតុបន្ទាប់ដោយផ្អែកលើគោលដៅដែលពាក់ព័ន្ធរបស់ពួកគេ។

ធុងដែលអាចរមូរបាន និងចូលប្រើក្តារចុច

ប្រសិនបើអ្នកកំពុងបង្កើតកុងតឺន័រដែលអាចរមូរបាន (ក្រៅពីប្រអប់ <body>) ត្រូវប្រាកដថាមាន heightសំណុំមួយ ហើយ overflow-y: scroll;អនុវត្តទៅវា - រួមជាមួយ a tabindex="0"ដើម្បីធានាការចូលប្រើក្តារចុច។

ឧទាហរណ៍នៅក្នុង navbar

រមូរតំបន់ខាងក្រោមរបាររុករក ហើយមើលការផ្លាស់ប្តូរថ្នាក់សកម្ម។ ធាតុទម្លាក់ចុះនឹងត្រូវបានបន្លិចផងដែរ។

ចំណងជើងដំបូង

នេះគឺជាមាតិកាកន្លែងដាក់មួយចំនួនសម្រាប់ទំព័ររមូរ។ ចំណាំថានៅពេលអ្នករមូរចុះក្រោមទំព័រ តំណរុករកដែលសមរម្យត្រូវបានបន្លិច។ វាត្រូវបានធ្វើម្តងទៀតនៅទូទាំងឧទាហរណ៍នៃសមាសភាគ។ យើងបន្តបន្ថែមការចម្លងឧទាហរណ៍មួយចំនួនទៀតនៅទីនេះ ដើម្បីបញ្ជាក់ពីការរមូរ និងការបន្លិច។

ចំណងជើងទីពីរ

នេះគឺជាមាតិកាកន្លែងដាក់មួយចំនួនសម្រាប់ទំព័ររមូរ។ ចំណាំថានៅពេលអ្នករមូរចុះក្រោមទំព័រ តំណរុករកដែលសមរម្យត្រូវបានបន្លិច។ វាត្រូវបានធ្វើម្តងទៀតនៅទូទាំងឧទាហរណ៍នៃសមាសភាគ។ យើងបន្តបន្ថែមការចម្លងឧទាហរណ៍មួយចំនួនទៀតនៅទីនេះ ដើម្បីបញ្ជាក់ពីការរមូរ និងការបន្លិច។

ចំណងជើងទីបី

នេះគឺជាមាតិកាកន្លែងដាក់មួយចំនួនសម្រាប់ទំព័ររមូរ។ ចំណាំថានៅពេលអ្នករមូរចុះក្រោមទំព័រ តំណរុករកដែលសមរម្យត្រូវបានបន្លិច។ វាត្រូវបានធ្វើម្តងទៀតនៅទូទាំងឧទាហរណ៍នៃសមាសភាគ។ យើងបន្តបន្ថែមការចម្លងឧទាហរណ៍មួយចំនួនទៀតនៅទីនេះ ដើម្បីបញ្ជាក់ពីការរមូរ និងការបន្លិច។

ក្បាលទីបួន

នេះគឺជាមាតិកាកន្លែងដាក់មួយចំនួនសម្រាប់ទំព័ររមូរ។ ចំណាំថានៅពេលអ្នករមូរចុះក្រោមទំព័រ តំណរុករកដែលសមរម្យត្រូវបានបន្លិច។ វាត្រូវបានធ្វើម្តងទៀតនៅទូទាំងឧទាហរណ៍នៃសមាសភាគ។ យើងបន្តបន្ថែមការចម្លងឧទាហរណ៍មួយចំនួនទៀតនៅទីនេះ ដើម្បីបញ្ជាក់ពីការរមូរ និងការបន្លិច។

ក្បាលទីប្រាំ

នេះគឺជាមាតិកាកន្លែងដាក់មួយចំនួនសម្រាប់ទំព័ររមូរ។ ចំណាំថានៅពេលអ្នករមូរចុះក្រោមទំព័រ តំណរុករកដែលសមរម្យត្រូវបានបន្លិច។ វាត្រូវបានធ្វើម្តងទៀតនៅទូទាំងឧទាហរណ៍នៃសមាសភាគ។ យើងបន្តបន្ថែមការចម្លងឧទាហរណ៍មួយចំនួនទៀតនៅទីនេះ ដើម្បីបញ្ជាក់ពីការរមូរ និងការបន្លិច។

<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។ រមូរ​ផ្ទៃ​នៅ​ជាប់​របារ​រុករក ហើយ​មើល​ការ​ផ្លាស់ប្ដូរ​ថ្នាក់​សកម្ម។

ធាតុ 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-groups ។ រមូរ​តំបន់​នៅ​ជាប់​ក្រុម​បញ្ជី ហើយ​មើល​ការ​ផ្លាស់ប្ដូរ​ថ្នាក់​សកម្ម។

ធាតុ 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សមាសធាតុ Bootstrap ណាមួយ។

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

បន្ទាប់ពីបន្ថែម position: relative;នៅក្នុង CSS របស់អ្នក សូមហៅទៅ scrollspy តាមរយៈ JavaScript៖

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

តម្រូវ​ឱ្យ​មាន​គោលដៅ ID ដែលអាចដោះស្រាយបាន។

តំណភ្ជាប់ Navbar ត្រូវតែមានគោលដៅលេខសម្គាល់ដែលអាចដោះស្រាយបាន។ ឧទាហរណ៍ <a href="#home">home</a>ត្រូវតែឆ្លើយតបទៅនឹងអ្វីមួយនៅក្នុង DOM ដូចជា <div id="home"></div>.

ធាតុគោលដៅដែលមិនអាចមើលឃើញត្រូវបានមិនអើពើ

ធាតុគោលដៅដែលមិនអាចមើលឃើញនឹងត្រូវបានមិនអើពើ ហើយធាតុ nav ដែលត្រូវគ្នារបស់ពួកគេនឹងមិនដែលត្រូវបានបន្លិចឡើយ។

វិធីសាស្រ្ត

ធ្វើ​ឱ្យ​ស្រស់

នៅពេលប្រើ scrollspy ដោយភ្ជាប់ជាមួយការបន្ថែម ឬការដកធាតុចេញពី DOM អ្នកនឹងត្រូវហៅវិធីសាស្ត្រធ្វើឱ្យស្រស់ដូចនេះ៖

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

បោះចោល

បំផ្លាញ scrollspy របស់ធាតុមួយ។ (លុបទិន្នន័យដែលបានរក្សាទុកនៅលើធាតុ DOM)

getInstance

វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានវត្ថុ scrollspy ដែលភ្ជាប់ជាមួយធាតុ DOM

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានវត្ថុ scrollspy ដែលភ្ជាប់ជាមួយធាតុ 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()វិធីសាស្រ្តដើម្បីទទួលបានកូអរដោនេរមូរ។ positionនឹងប្រើ HTMLElement.offsetTopនិង HTMLElement.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...
})