ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
in English

ເລື່ອນ

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

ໃນໜ້ານີ້

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

Scrollspy ມີຄວາມຕ້ອງການຈໍານວນຫນ້ອຍເພື່ອເຮັດວຽກຢ່າງຖືກຕ້ອງ:

  • ມັນຕ້ອງຖືກໃຊ້ໃນ ອົງປະກອບ Bootstrap nav ຫຼື ກຸ່ມລາຍຊື່ .
  • Scrollspy ຮຽກຮ້ອງໃຫ້ມີ position: relative;ອົງປະກອບທີ່ທ່ານກໍາລັງ spying ສຸດ, ປົກກະຕິແລ້ວ <body>.
  • Anchors ( <a>) ແມ່ນຈໍາເປັນແລະຕ້ອງຊີ້ໄປຫາອົງປະກອບທີ່ມີນັ້ນ id.

ເມື່ອປະຕິບັດຢ່າງສໍາເລັດຜົນ, ກຸ່ມ nav ຫຼືລາຍຊື່ຂອງທ່ານຈະປັບປຸງຕາມຄວາມເຫມາະສົມ, ການເຄື່ອນຍ້າຍ .activeຊັ້ນຮຽນຈາກຫນຶ່ງລາຍການໄປຫາຕໍ່ໄປໂດຍອີງໃສ່ເປົ້າຫມາຍທີ່ກ່ຽວຂ້ອງຂອງພວກເຂົາ.

ຕູ້ຄອນເທນເນີທີ່ສາມາດເລື່ອນໄດ້ແລະການເຂົ້າເຖິງແປ້ນພິມ

ຖ້າທ່ານກໍາລັງສ້າງຕູ້ຄອນເທນເນີທີ່ສາມາດເລື່ອນໄດ້ (ນອກ ເໜືອ ຈາກຕົວບັນຈຸ <body>), ໃຫ້ແນ່ໃຈວ່າມີ heightຊຸດແລະ overflow-y: scroll;ນໍາໃຊ້ກັບມັນ - ຄຽງຄູ່ກັບ tabindex="0"ການຮັບປະກັນການເຂົ້າເຖິງແປ້ນພິມ.

ຕົວຢ່າງໃນ navbar

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

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

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ຫົວຂໍ້ທີສອງ

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ຫົວຂໍ້ທີສາມ

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ຫົວຂໍ້ທີສີ່

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ຫົວຂໍ້ທີຫ້າ

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

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

ຕົວຢ່າງດ້ວຍ nav nested

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

ລາຍການທີ 1

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ລາຍການ 1-1

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ລາຍການ 1-2

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ລາຍການ 2

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ລາຍການທີ 3

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ລາຍການ 3-1

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ລາຍການ 3-2

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

<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

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ລາຍການ 2

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ລາຍການທີ 3

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

ລາຍການທີ 4

ນີ້​ແມ່ນ​ບາງ​ເນື້ອ​ໃນ​ຕົວ​ຍຶດ​ສໍາ​ລັບ​ຫນ້າ scrollspy. ໃຫ້ສັງເກດວ່າເມື່ອທ່ານເລື່ອນລົງຫນ້າ, ການເຊື່ອມຕໍ່ນໍາທາງທີ່ເຫມາະສົມຈະຖືກເນັ້ນໃສ່. ມັນຊ້ໍາກັນຕະຫຼອດຕົວຢ່າງອົງປະກອບ. ພວກເຮົາສືບຕໍ່ເພີ່ມບາງຕົວຢ່າງສໍາເນົາເພີ່ມເຕີມທີ່ນີ້ເພື່ອເນັ້ນຫນັກໃສ່ການເລື່ອນພາບແລະການເນັ້ນ.

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

ການ​ນໍາ​ໃຊ້

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

ເພື່ອ​ເພີ່ມ​ພຶດ​ຕິ​ກໍາ scrollspy ໄດ້​ຢ່າງ​ງ່າຍ​ດາຍ​ໃນ​ການ​ນໍາ​ທາງ topbar ຂອງ​ທ່ານ, ເພີ່ມ data-bs-spy="scroll"​ໃສ່​ອົງ​ປະ​ກອບ​ທີ່​ທ່ານ​ຕ້ອງ​ການ​ທີ່​ຈະ spy ກ່ຽວ​ກັບ (ໂດຍ​ປົກ​ກະ​ຕິ​ຫຼາຍ​ທີ່​ສຸດ​ນີ້​ຈະ​ເປັນ <body>). ຫຼັງຈາກນັ້ນ, ເພີ່ມ data-bs-targetຄຸນລັກສະນະທີ່ມີ ID ຫຼືຊັ້ນຂອງອົງປະກອບຫຼັກຂອງອົງປະກອບ Bootstrap ໃດ .nav.

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 ຕ້ອງມີເປົ້າໝາຍ id ທີ່ສາມາດແກ້ໄຂໄດ້. ຕົວຢ່າງ, <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()
})

ຖິ້ມ

ທໍາລາຍການເລື່ອນພາບຂອງອົງປະກອບ. (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ DOM)

getInstance

ວິທີການ ຄົງ ທີ່ທີ່ອະນຸຍາດໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ scrollspy ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM

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

getOrCreateInstance

ວິ​ທີ​ການ ​ຄົງ ​ທີ່​ທີ່​ອະ​ນຸ​ຍາດ​ໃຫ້​ທ່ານ​ໄດ້​ຮັບ​ການ scrollspy instance ທີ່​ກ່ຽວ​ຂ້ອງ​ກັບ​ອົງ​ປະ​ກອບ 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 pixels ທີ່ຈະຊົດເຊີຍຈາກດ້ານເທິງໃນເວລາທີ່ຄິດໄລ່ຕໍາແຫນ່ງເລື່ອນ.
method ສາຍ auto ຊອກຫາພາກສ່ວນໃດທີ່ອົງປະກອບ spied ຢູ່ໃນ. autoຈະເລືອກວິທີການທີ່ດີທີ່ສຸດເພື່ອຮັບພິກັດເລື່ອນ. offsetຈະໃຊ້ Element.getBoundingClientRect()ວິທີການເພື່ອຮັບຈຸດປະສານງານເລື່ອນ. positionຈະໃຊ້ HTMLElement.offsetTopແລະ HTMLElement.offsetLeftຄຸນສົມບັດເພື່ອຮັບພິກັດເລື່ອນ.
target ຊ່ອຍແນ່ | jQuery object | ອົງປະກອບ DOM ລະບຸອົງປະກອບເພື່ອນຳໃຊ້ Scrollspy plugin.

ເຫດການ

ປະເພດເຫດການ ລາຍລະອຽດ
activate.bs.scrollspy ເຫດການນີ້ຈະດັບໄຟໃສ່ອົງປະກອບເລື່ອນທຸກຄັ້ງທີ່ລາຍການໃໝ່ຖືກເປີດໃຊ້ໂດຍ scrollspy. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})