ເລື່ອນ

ອັບເດດການນຳທາງ Bootstrap ໂດຍອັດຕະໂນມັດ ຫຼືລາຍຊື່ອົງປະກອບກຸ່ມໂດຍອີງໃສ່ຕຳແໜ່ງເລື່ອນເພື່ອລະບຸວ່າລິ້ງໃດກຳລັງເຄື່ອນໄຫວຢູ່ໃນຊ່ອງເບິ່ງ.

ໃນໜ້ານີ້

ມັນເຮັດວຽກແນວໃດ

Scrollspy ສະຫຼັບ .activeຊັ້ນຮຽນຢູ່ໃນອົງປະກອບສະມໍ ( <a>) ເມື່ອອົງປະກອບທີ່ມີການ idອ້າງອີງໂດຍສະມໍ hrefຖືກເລື່ອນເຂົ້າໄປເບິ່ງ. Scrollspy ຖືກໃຊ້ດີທີ່ສຸດໂດຍສົມທົບກັບ ອົງປະກອບຂອງ Bootstrap nav ຫຼື ກຸ່ມລາຍຊື່ , ແຕ່ມັນຍັງຈະເຮັດວຽກກັບອົງປະກອບສະມໍໃນຫນ້າປະຈຸບັນ. ນີ້ແມ່ນວິທີທີ່ມັນເຮັດວຽກ.

ເພື່ອເລີ່ມຕົ້ນ, scrollspy ຕ້ອງການສອງຢ່າງ: ການນໍາທາງ, ກຸ່ມລາຍຊື່, ຫຼືຊຸດການເຊື່ອມໂຍງແບບງ່າຍໆ, ບວກກັບຖັງທີ່ສາມາດເລື່ອນໄດ້. ຕູ້ຄອນເທນເນີທີ່ສາມາດເລື່ອນໄດ້ສາມາດເປັນ <body>ຫຼືອົງປະກອບທີ່ກໍາຫນົດເອງທີ່ມີຊຸດ heightແລະ overflow-y: scroll.
ໃນຕູ້ຄອນເທນເນີທີ່ສາມາດເລື່ອນໄດ້, ເພີ່ມ data-bs-spy="scroll"ແລະ data-bs-target="#navId"ບ່ອນທີ່ navIdເປັນເອກະລັກ idຂອງການນໍາທາງທີ່ກ່ຽວຂ້ອງ. ໃຫ້ແນ່ໃຈວ່າຈະລວມເອົາ tabindex="0"ເພື່ອຮັບປະກັນການເຂົ້າເຖິງແປ້ນພິມ.
ໃນຂະນະທີ່ທ່ານເລື່ອນ "spied" container, .activeຫ້ອງຮຽນຖືກເພີ່ມແລະເອົາອອກຈາກການເຊື່ອມຕໍ່ສະມໍພາຍໃນການນໍາທາງທີ່ກ່ຽວຂ້ອງ. ການເຊື່ອມຕໍ່ຕ້ອງມີ idເປົ້າຫມາຍທີ່ສາມາດແກ້ໄຂໄດ້, ຖ້າບໍ່ດັ່ງນັ້ນພວກມັນຈະຖືກລະເລີຍ. ຕົວຢ່າງ, <a href="#home">home</a>ຕ້ອງສອດຄ່ອງກັບບາງສິ່ງບາງຢ່າງໃນ DOM ເຊັ່ນ<div id="home"></div>
ອົງປະກອບເປົ້າໝາຍທີ່ເບິ່ງບໍ່ເຫັນຈະຖືກລະເລີຍ. ເບິ່ງ ພາກສ່ວນ ອົງປະກອບທີ່ບໍ່ສາມາດເຫັນໄດ້ ຂ້າງລຸ່ມນີ້.

ຕົວຢ່າງ

ເລື່ອນພື້ນທີ່ທາງລຸ່ມແຖບ navbar ແລະເບິ່ງການປ່ຽນແປງຊັ້ນຮຽນທີ່ມີການເຄື່ອນໄຫວ. ເປີດເມນູແບບເລື່ອນລົງ ແລະເບິ່ງລາຍການແບບເລື່ອນລົງຈະຖືກເນັ້ນໃສ່ເຊັ່ນກັນ.

ຫົວຂໍ້ທໍາອິດ

ນີ້ແມ່ນບາງເນື້ອໃນຕົວຍຶດສໍາລັບຫນ້າ 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>

Nested nav

Scrollspy ຍັງເຮັດວຽກກັບ nested .navs. .navຖ້າ ເປັນ ຮັງ .active, ພໍ່ແມ່ຂອງມັນຈະເປັນຄື .activeກັນ. ເລື່ອນພື້ນທີ່ຖັດຈາກແຖບນໍາທາງ ແລະເບິ່ງການປ່ຽນແປງຫ້ອງຮຽນທີ່ເຄື່ອນໄຫວຢູ່.

ລາຍການທີ 1

ຈົ່ງຈື່ໄວ້ວ່າ plugin JavaScript ພະຍາຍາມເລືອກອົງປະກອບທີ່ຖືກຕ້ອງໃນບັນດາສິ່ງທີ່ອາດຈະເຫັນໄດ້. ເປົ້າໝາຍ scrollspy ທີ່ເຫັນໄດ້ຫຼາຍໃນເວລາດຽວກັນອາດເຮັດໃຫ້ເກີດບັນຫາບາງຢ່າງ.

ລາຍການ 1-1

ລາຍການ 1-2

ລາຍການ 2

ລາຍການທີ 3

ລາຍການ 3-1

ລາຍການ 3-2

<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

ລາຍການທີ 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

ລາຍການທີ 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ວິທີການກວດສອບອົງປະກອບທີ່ສັງເກດໄດ້ເມື່ອ wrapper ເຫັນໄດ້.

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()
  })
})

ການນໍາໃຊ້

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ເພື່ອເພີ່ມພຶດຕິກໍາ scrollspy ໄດ້ຢ່າງງ່າຍດາຍໃນການນໍາທາງ topbar ຂອງທ່ານ, ເພີ່ມ data-bs-spy="scroll"ໃສ່ອົງປະກອບທີ່ທ່ານຕ້ອງການທີ່ຈະ spy ກ່ຽວກັບ (ໂດຍປົກກະຕິຫຼາຍທີ່ສຸດນີ້ຈະເປັນ <body>). ຫຼັງຈາກນັ້ນ, ເພີ່ມ data-bs-targetຄຸນລັກສະນະທີ່ມີຊື່ idຫຼືຊັ້ນຂອງອົງປະກອບຫຼັກຂອງອົງປະກອບ Bootstrap ໃດ .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}". ໃຫ້ແນ່ໃຈວ່າປ່ຽນປະເພດກໍລະນີຂອງຊື່ທາງເລືອກຈາກ " camelCase " ເປັນ " kebab-case " ເມື່ອຖ່າຍທອດທາງເລືອກຜ່ານຄຸນລັກສະນະຂໍ້ມູນ. ຕົວຢ່າງ, ໃຊ້ data-bs-custom-class="beautifier"ແທນ data-bs-customClass="beautifier".

ໃນຖານະເປັນຂອງ Bootstrap 5.2.0, ອົງປະກອບທັງຫມົດສະຫນັບສະຫນູນ ຄຸນລັກສະນະຂໍ້ມູນທີ່ສະຫງວນໄວ້ສໍາ ລັບ ການທົດລອງdata-bs-config ທີ່ສາມາດຈັດການຕັ້ງຄ່າອົງປະກອບງ່າຍດາຍເປັນ JSON string. ເມື່ອອົງປະກອບມີ data-bs-config='{"delay":0, "title":123}'ແລະ data-bs-title="456"ຄຸນລັກສະນະ, ຄ່າສຸດທ້າຍ titleຈະເປັນ 456ແລະຄຸນລັກສະນະຂອງຂໍ້ມູນແຍກຕ່າງຫາກຈະ override ຄ່າທີ່ໃຫ້ຢູ່ໃນ data-bs-config. ນອກຈາກນັ້ນ, ຄຸນລັກສະນະຂໍ້ມູນທີ່ມີຢູ່ແມ່ນສາມາດຈັດວາງຄ່າ JSON ເຊັ່ນ data-bs-delay='{"show":0,"hide":150}'.

ຊື່	ປະເພດ	ຄ່າເລີ່ມຕົ້ນ	ລາຍລະອຽດ
`rootMargin`	ສາຍ	`0px 0px -25%`	Intersection Observer rootMargin ຫນ່ວຍທີ່ຖືກຕ້ອງ, ເມື່ອຄິດໄລ່ຕໍາແຫນ່ງເລື່ອນ.
`smoothScroll`	ບູລີນ	`false`	ເປີດໃຊ້ການເລື່ອນແບບລຽບໆ ເມື່ອຜູ້ໃຊ້ຄລິກໃສ່ການເຊື່ອມຕໍ່ທີ່ອ້າງອີງເຖິງ ScrollSpy observables.
`target`	string, ອົງປະກອບ DOM	`null`	ລະບຸອົງປະກອບເພື່ອນຳໃຊ້ Scrollspy plugin.
`threshold`	array	`[0.1, 0.5, 1]`	`IntersectionObserver` ເກນ ການປ້ອນຂໍ້ມູນທີ່ຖືກຕ້ອງ, ເມື່ອຄິດໄລ່ຕຳແໜ່ງເລື່ອນ.

ຕົວເລືອກທີ່ປະຕິເສດ

ຈົນຮອດ v5.1.3 ພວກເຮົາກຳລັງໃຊ້ offset& methodທາງເລືອກ, ເຊິ່ງຕອນນີ້ຖືກຍົກເລີກ ແລະປ່ຽນແທນດ້ວຍ rootMargin. ເພື່ອຮັກສາຄວາມເຂົ້າກັນໄດ້ໃນດ້ານຫຼັງ, ພວກເຮົາຈະສືບຕໍ່ວິເຄາະທີ່ມອບ offsetໃຫ້ rootMargin, ແຕ່ຄຸນສົມບັດນີ້ຈະຖືກລຶບອອກໃນ v6 .

ວິທີການ

ວິທີການ	ລາຍລະອຽດ
`dispose`	ທໍາລາຍການເລື່ອນພາບຂອງອົງປະກອບ. (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ 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...
})

ເລື່ອນ

ມັນເຮັດວຽກແນວໃດ

ຕົວຢ່າງ

Navbar

ຫົວຂໍ້ທໍາອິດ

ຫົວຂໍ້ທີສອງ

ຫົວຂໍ້ທີສາມ

ຫົວຂໍ້ທີສີ່

ຫົວຂໍ້ທີຫ້າ

Nested nav

ລາຍການທີ 1

ລາຍການ 1-1

ລາຍການ 1-2

ລາຍການ 2

ລາຍການທີ 3

ລາຍການ 3-1

ລາຍການ 3-2

ລາຍຊື່ກຸ່ມ

ລາຍການທີ 1

ລາຍການ 2

ລາຍການທີ 3

ລາຍການທີ 4

ສະມໍແບບງ່າຍດາຍ

ລາຍການທີ 1

ລາຍການ 2

ລາຍການທີ 3

ລາຍການທີ 4

ລາຍການ 5

ອົງປະກອບທີ່ບໍ່ສາມາດເບິ່ງເຫັນໄດ້

ການ​ນໍາ​ໃຊ້

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ຜ່ານ JavaScript

ທາງເລືອກ

ວິທີການ

ເຫດການ

ການນໍາໃຊ້