ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯇꯧꯕꯥ꯫

ꯚꯤꯎꯄꯣꯔꯇꯇꯥ ꯍꯧꯖꯤꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯀꯔꯝꯕꯥ ꯂꯤꯉ꯭ꯛ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯔꯤꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯁ꯭ꯛꯔꯣꯜ ꯄꯣꯖꯤꯁꯅꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯅꯠꯠꯔꯒꯥ ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧ꯫

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤꯅꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯃꯊꯧ ꯇꯥꯕꯥ ꯈꯔꯥ ꯂꯩ:

ꯃꯁꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯅꯦꯚ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯅꯠꯔꯒꯥ ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ ꯑꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯕꯅꯤ .
ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤꯅꯥ position: relative;ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯄꯥꯏ ꯇꯧꯔꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯃꯊꯧ ꯇꯥꯏ, ꯃꯍꯧꯁꯥꯅꯥ <body>.
ꯑꯦꯉ꯭ꯀꯔꯁꯤꯡ ( <a>) ꯃꯊꯧ ꯇꯥꯏ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯇꯥꯀꯄꯥ ꯇꯥꯏ id.

ꯃꯥꯌ ꯄꯥꯛꯅꯥ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯅꯍꯥꯛꯀꯤ ꯅꯦꯚ ꯅꯠꯠꯔꯒꯥ ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ ꯑꯗꯨꯅꯥ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯒꯅꯤ, .activeꯃꯈꯣꯌꯒꯤ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯄꯥꯟꯗꯃꯁꯤꯡꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯔꯒꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯗꯒꯤ ꯃꯊꯪꯒꯤ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯗꯥ ꯂꯧꯊꯣꯛꯀꯅꯤ꯫

ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯤꯕꯣꯔꯗ ꯑꯦꯛꯁꯦꯁ ꯂꯩꯕꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯥ ꯁꯦꯝꯂꯕꯗꯤ (ꯃꯗꯨ ꯅꯠꯇꯕꯥ <body>), heightꯁꯦꯠ ꯑꯃꯥ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯅꯒꯗꯕꯅꯤ ꯑꯃꯁꯨꯡ overflow-y: scroll;ꯃꯗꯨꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯒꯗꯕꯅꯤ— tabindex="0"ꯀꯤꯕꯣꯔꯗ ꯑꯦꯛꯁꯦꯁ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯟꯅꯕꯥ aꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯅꯦꯚꯕꯥꯔꯒꯤ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯃꯐꯝ ꯑꯗꯨ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯇꯤꯕ ꯀ꯭ꯂꯥꯁ ꯍꯣꯡꯂꯀꯄꯥ ꯑꯗꯨ ꯌꯦꯡꯎ꯫ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯁꯨ ꯍꯥꯏꯂꯥꯏꯠ ꯇꯧꯒꯅꯤ꯫

ꯑꯍꯥꯅꯕꯥ ꯍꯦꯗꯤꯡ꯫

ꯃꯁꯤ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯄꯦꯖꯒꯤꯗꯃꯛ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ ꯈꯔꯅꯤ꯫ ꯅꯍꯥꯛꯅꯥ ꯄꯦꯖ ꯑꯗꯨꯒꯤ ꯃꯈꯥꯗꯥ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯃꯊꯧ ꯇꯥꯕꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯂꯤꯉ꯭ꯛ ꯑꯗꯨ ꯍꯥꯏꯂꯥꯏꯠ ꯇꯧꯔꯦ ꯍꯥꯌꯕꯥ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫ ꯃꯁꯤ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯈꯨꯗꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯍꯟꯖꯤꯟ ꯍꯟꯖꯤꯟ ꯍꯥꯌꯔꯤ꯫ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯍꯥꯏꯂꯥꯏꯠ ꯇꯧꯕꯗꯥ ꯑꯀꯅꯕꯥ ꯋꯥꯐꯝ ꯊꯝꯅꯕꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯈꯨꯗꯝ ꯀꯣꯄꯤ ꯈꯔꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫

ꯑꯅꯤꯁꯨꯕꯥ ꯍꯦꯗꯤꯡ꯫

ꯃꯁꯤ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯄꯦꯖꯒꯤꯗꯃ�� ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ ꯈꯔꯅꯤ꯫ ꯅꯍꯥꯛꯅꯥ ꯄꯦꯖ ꯑꯗꯨꯒꯤ ꯃꯈꯥꯗꯥ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯃꯊꯧ ꯇꯥꯕꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯂꯤꯉ꯭ꯛ ꯑꯗꯨ ꯍꯥꯏꯂꯥꯏꯠ ꯇꯧꯔꯦ ꯍꯥꯌꯕꯥ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫ ꯃꯁꯤ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯈꯨꯗꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯍꯟꯖꯤꯟ ꯍꯟꯖꯤꯟ ꯍꯥꯌꯔꯤ꯫ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯍꯥꯏꯂꯥꯏꯠ ꯇꯧꯕꯗꯥ ꯑꯀꯅꯕꯥ ꯋꯥꯐꯝ ꯊꯝꯅꯕꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯈꯨꯗꯝ ꯀꯣꯄꯤ ꯈꯔꯥ ꯍꯥꯄꯆꯤꯜꯂꯤ꯫

ꯑꯍꯨꯃꯁꯨꯕꯥ ꯍꯦꯗꯤꯡ꯫

ꯃꯔꯤꯁꯨꯕꯥ ꯍꯦꯗꯤꯡ꯫

ꯃꯉꯥꯁꯨꯕꯥ ꯍꯦꯗꯤꯡ꯫

<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ꯑꯦꯁ. ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯦꯁ꯭ꯇꯦꯗ ꯑꯃꯥ ꯑꯣꯏꯔꯕꯗꯤ .navꯃꯁꯤꯒꯤ .activeꯃꯃꯥ - ꯃꯄꯥꯁꯤꯡꯁꯨ .active. ꯅꯦꯚꯕꯥꯔꯒꯤ ꯃꯅꯥꯛꯇꯥ ꯂꯩꯕꯥ ꯑꯦꯔꯤꯌꯥ ꯑꯗꯨ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯇꯤꯕ ꯀ꯭ꯂꯥꯁ ꯍꯣꯡꯂꯀꯄꯥ ꯑꯗꯨ ꯌꯦꯡꯎ꯫

ꯑꯥꯏꯇꯦꯝ ꯱

ꯑꯥꯏꯇꯦꯝ ꯱-꯱ ꯂꯩ꯫

ꯑꯥꯏꯇꯦꯝ ꯱-꯲ ꯂꯩ꯫

ꯑꯥꯏꯇꯦꯝ ꯲

ꯑꯥꯏꯇꯦꯝ ꯳

ꯑꯥꯏꯇꯦꯝ ꯳-꯱ ꯂꯩ꯫

ꯑꯥꯏꯇꯦꯝ ꯳-꯲ ꯂꯩ꯫

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

ꯂꯤꯁ꯭ꯠ-ꯒ꯭ꯔꯨꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯈꯨꯗꯝ꯫

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤꯅꯥ .list-groupꯑꯦꯁ. ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ ꯑꯗꯨꯒꯤ ꯃꯅꯥꯛꯇꯥ ꯂꯩꯕꯥ ꯑꯦꯔꯤꯌꯥ ꯑꯗꯨ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯇꯤꯕ ꯀ꯭ꯂꯥꯁ ꯍꯣꯡꯂꯀꯄꯥ ꯑꯗꯨ ꯌꯦꯡꯎ꯫

ꯑꯥꯏꯇꯦꯝ ꯱ ꯑꯥꯏꯇꯦꯝ ꯲ ꯑꯥꯏꯇꯦꯝ ꯳ ꯑꯥꯏꯇꯦꯝ ꯴

ꯑꯥꯏꯇꯦꯝ ꯱

ꯑꯥꯏꯇꯦꯝ ꯲

ꯑꯥꯏꯇꯦꯝ ꯳

ꯑꯥꯏꯇꯦꯝ ꯴

<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ꯑꯃꯍꯦꯛꯇꯒꯤ ꯄꯦꯔꯦꯟꯇ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ID ꯅꯠꯠꯔꯒꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.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>

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯅꯍꯥꯛꯀꯤ CSSꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ position: relative;, ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯥꯏꯗꯥ ꯀꯧꯕꯤꯌꯨ:

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

ꯔꯤꯖꯣꯂꯕ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯥꯏ.ꯗꯤ.ꯒꯤ ꯄꯥꯟꯗꯃꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯅꯕꯕꯥꯔ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯗꯥ ꯔꯤꯖꯣꯂꯕ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯥꯏ.ꯗꯤ. ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, a <a href="#home">home</a>ꯑꯁꯤ <div id="home"></div>.

ꯅꯟ-ꯚꯤꯖꯤꯕꯜ ꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯏꯒꯅꯣꯔ ꯇꯧꯈꯤ꯫

ꯎꯕꯥ ꯐꯪꯗꯕꯥ ꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯌꯦꯡꯁꯤꯅꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯒꯤ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯅꯦꯚ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯑꯁꯤ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯍꯥꯏꯂꯥꯏꯠ ꯇꯧꯔꯣꯏ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

ꯔꯤꯐ꯭ꯔꯦꯁ ꯇꯧꯕꯥ꯫

DOM ꯗꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯧꯊꯣꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯁꯤꯖꯤꯟꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯔꯤꯐ꯭ꯔꯦꯁ ꯃꯦꯊꯗ ꯑꯗꯨ ꯑꯁꯨꯝꯅꯥ ꯀꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ:

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

ꯗꯤꯁꯄꯣꯖ ꯇꯧꯕꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯃꯥꯡꯍꯜꯂꯤ꯫ (ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯇꯥ ꯊꯝꯂꯤꯕꯥ ꯗꯦꯇꯥ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯏ)

getInstance ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫

DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ ꯌꯥꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ꯫

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

getOrCreateInstance ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫

DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯏꯟꯁꯇꯦꯟꯁ ꯑꯗꯨ ꯐꯪꯍꯅꯕꯥ ꯉꯝꯕꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯊꯗ, ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤ ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯗꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯅꯧꯕꯥ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-bs-, data-bs-offset="".

ꯃꯤꯡ	ꯃꯈꯜ	ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ	ꯋꯥꯔꯣꯜ
`offset`	ꯃꯁꯤꯡ	`10`	ꯁ꯭ꯛꯔꯣꯂ��ꯤ ꯄꯣꯖꯤꯁꯟ ꯂꯦꯄꯊꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯃꯊꯛꯇꯒꯤ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯄꯤꯛꯁꯦꯂꯁꯤꯡ꯫
`method`	ꯄꯔꯦꯡ	`auto`	ꯁ꯭ꯄꯥꯏꯗ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯀꯔꯝꯕꯥ ꯁꯦꯛꯁꯅꯗꯥ ꯂꯩꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯪꯗꯣꯀꯏ..ꯅꯥ `auto`ꯁ꯭ꯛꯔꯣꯜ ꯀꯣꯑꯣꯔꯗꯤꯅꯦꯠꯁꯤꯡ ꯐꯪꯅꯕꯒꯤꯗꯃꯛ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯃꯦꯊꯗ ꯑꯗꯨ ꯈꯜꯂꯒꯅꯤ꯫ ꯁ꯭ꯛꯔꯣꯜ ꯀꯣꯑꯣꯔꯗꯤꯅꯦꯠꯁꯤꯡ ꯐꯪꯅꯕꯥ ꯃꯦꯊꯗ ꯑꯗꯨ `offset`ꯁꯤꯖꯤꯟꯅꯒꯅꯤ꯫ ꯁ꯭ꯛꯔꯣꯜ ꯀꯣꯑꯣꯔꯗꯤꯅꯦꯠꯁꯤꯡ ꯐꯪꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ꯫`Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.offsetLeft`
`target`	ꯁ꯭ꯠꯔꯤꯡ \| jQuery ꯑꯣꯕꯖꯦꯛꯇ \| ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ꯫		ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯥꯏ ꯄ꯭ꯂꯒꯏꯟ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯥꯀꯏ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫	ꯋꯥꯔꯣꯜ
`activate.bs.scrollspy`	ꯊꯧꯗꯣꯛ ꯑꯁꯤꯅꯥ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤꯅꯥ ꯑꯅꯧꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯃꯇꯃꯗꯥ ꯁ꯭ꯛꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯇꯧꯕꯥ꯫

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯤꯕꯣꯔꯗ ꯑꯦꯛꯁꯦꯁ ꯂꯩꯕꯥ꯫

ꯅꯕꯕꯥꯔꯗꯥ ꯈꯨꯗꯝ꯫

ꯑꯍꯥꯅꯕꯥ ꯍꯦꯗꯤꯡ꯫

ꯑꯅꯤꯁꯨꯕꯥ ꯍꯦꯗꯤꯡ꯫

ꯑꯍꯨꯃꯁꯨꯕꯥ ꯍꯦꯗꯤꯡ꯫

ꯃꯔꯤꯁꯨꯕꯥ ꯍꯦꯗꯤꯡ꯫

ꯃꯉꯥꯁꯨꯕꯥ ꯍꯦꯗꯤꯡ꯫

ꯅꯦꯁ꯭ꯇꯦꯗ ꯅꯦꯚꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯈꯨꯗꯝ꯫

ꯑꯥꯏꯇꯦꯝ ꯱

ꯑꯥꯏꯇꯦꯝ ꯱-꯱ ꯂꯩ꯫

ꯑꯥꯏꯇꯦꯝ ꯱-꯲ ꯂꯩ꯫

ꯑꯥꯏꯇꯦꯝ ꯲

ꯑꯥꯏꯇꯦꯝ ꯳

ꯑꯥꯏꯇꯦꯝ ꯳-꯱ ꯂꯩ꯫

ꯑꯥꯏꯇꯦꯝ ꯳-꯲ ꯂꯩ꯫

ꯂꯤꯁ꯭ꯠ-ꯒ꯭ꯔꯨꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯈꯨꯗꯝ꯫

ꯑꯥꯏꯇꯦꯝ ꯱

ꯑꯥꯏꯇꯦꯝ ꯲

ꯑꯥꯏꯇꯦꯝ ꯳

ꯑꯥꯏꯇꯦꯝ ꯴

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯔꯤꯖꯣꯂꯕ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯥꯏ.ꯗꯤ.ꯒꯤ ꯄꯥꯟꯗꯃꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯅꯟ-ꯚꯤꯖꯤꯕꯜ ꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯏꯒꯅꯣꯔ ꯇꯧꯈꯤ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

ꯔꯤꯐ꯭ꯔꯦꯁ ꯇꯧꯕꯥ꯫

ꯗꯤꯁꯄꯣꯖ ꯇꯧꯕꯥ꯫

getInstance ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫

getOrCreateInstance ꯍꯥꯌꯅꯥ ꯂꯧꯕꯥ ꯌꯥꯏ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫