ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
in English

Scrollspy

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸಿ ಅಥವಾ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ ಗುಂಪು ಘಟಕಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಿ ಪ್ರಸ್ತುತ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನಲ್ಲಿ ಯಾವ ಲಿಂಕ್ ಸಕ್ರಿಯವಾಗಿದೆ ಎಂಬುದನ್ನು ಸೂಚಿಸಿ.

ಈ ಪುಟದಲ್ಲಿ

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಲು Scrollspy ಕೆಲವು ಅವಶ್ಯಕತೆಗಳನ್ನು ಹೊಂದಿದೆ:

ಯಶಸ್ವಿಯಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಿದಾಗ, ನಿಮ್ಮ NAV ಅಥವಾ ಪಟ್ಟಿ ಗುಂಪು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ನವೀಕರಿಸುತ್ತದೆ, .activeಅವುಗಳ ಸಂಬಂಧಿತ ಗುರಿಗಳ ಆಧಾರದ ಮೇಲೆ ವರ್ಗವನ್ನು ಒಂದು ಐಟಂನಿಂದ ಇನ್ನೊಂದಕ್ಕೆ ವರ್ಗಾಯಿಸುತ್ತದೆ.

ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಕಂಟೈನರ್‌ಗಳು ಮತ್ತು ಕೀಬೋರ್ಡ್ ಪ್ರವೇಶ

ನೀವು ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಧಾರಕವನ್ನು ತಯಾರಿಸುತ್ತಿದ್ದರೆ (ಇದನ್ನು ಹೊರತುಪಡಿಸಿ ), ಕೀಬೋರ್ಡ್ ಪ್ರವೇಶವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು a ಜೊತೆಗೆ ಒಂದು ಸೆಟ್ <body>ಅನ್ನು ಹೊಂದಲು ಮತ್ತು ಅನ್ವಯಿಸಲು ಮರೆಯದಿರಿ.heightoverflow-y: scroll;tabindex="0"

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>

ನೆಸ್ಟೆಡ್ ನ್ಯಾವ್ ಜೊತೆಗಿನ ಉದಾಹರಣೆ

Scrollspy ಕೂಡ ನೆಸ್ಟೆಡ್ .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-group. ಪಟ್ಟಿ ಗುಂಪಿನ ಮುಂದಿನ ಪ್ರದೇಶವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಿ ಮತ್ತು ಸಕ್ರಿಯ ವರ್ಗ ಬದಲಾವಣೆಯನ್ನು ವೀಕ್ಷಿಸಿ.

ಐಟಂ 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>

ಬಳಕೆ

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

ನಿಮ್ಮ ಟಾಪ್‌ಬಾರ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿ ನಡವಳಿಕೆಯನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಲು, 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;, JavaScript ಮೂಲಕ scrollspy ಗೆ ಕರೆ ಮಾಡಿ:

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

ಪರಿಹರಿಸಬಹುದಾದ ID ಗುರಿಗಳ ಅಗತ್ಯವಿದೆ

Navbar ಲಿಂಕ್‌ಗಳು ಪರಿಹರಿಸಬಹುದಾದ ಐಡಿ ಗುರಿಗಳನ್ನು ಹೊಂದಿರಬೇಕು. ಉದಾಹರಣೆಗೆ, <a href="#home">home</a>DOM ನಲ್ಲಿರುವ ಯಾವುದನ್ನಾದರೂ ಹೊಂದಿರಬೇಕು <div id="home"></div>.

ಗೋಚರಿಸದ ಗುರಿ ಅಂಶಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗಿದೆ

ಗೋಚರಿಸದ ಉದ್ದೇಶಿತ ಅಂಶಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅವುಗಳ ಅನುಗುಣವಾದ ನ್ಯಾವ್ ಐಟಂಗಳನ್ನು ಎಂದಿಗೂ ಹೈಲೈಟ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ.

ವಿಧಾನಗಳು

ರಿಫ್ರೆಶ್ ಮಾಡಿ

DOM ನಿಂದ ಅಂಶಗಳನ್ನು ಸೇರಿಸುವ ಅಥವಾ ತೆಗೆದುಹಾಕುವುದರೊಂದಿಗೆ scrollspy ಅನ್ನು ಬಳಸುವಾಗ, ನೀವು ರಿಫ್ರೆಶ್ ವಿಧಾನವನ್ನು ಹೀಗೆ ಕರೆಯಬೇಕಾಗುತ್ತದೆ:

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

ವಿಲೇವಾರಿ ಮಾಡು

ಒಂದು ಅಂಶದ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿಯನ್ನು ನಾಶಪಡಿಸುತ್ತದೆ. (DOM ಅಂಶದಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾದ ಡೇಟಾವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ)

ಪಡೆಯಿರಿ ನಿದರ್ಶನ

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 ವಸ್ತು | DOM ಅಂಶ Scrollspy ಪ್ಲಗಿನ್ ಅನ್ನು ಅನ್ವಯಿಸಲು ಅಂಶವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.

ಕಾರ್ಯಕ್ರಮಗಳು

ಈವೆಂಟ್ ಪ್ರಕಾರ ವಿವರಣೆ
activate.bs.scrollspy ಸ್ಕ್ರಾಲ್‌ಸ್ಪಿಯಿಂದ ಹೊಸ ಐಟಂ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದಾಗಲೆಲ್ಲಾ ಈ ಈವೆಂಟ್ ಸ್ಕ್ರಾಲ್ ಅಂಶದ ಮೇಲೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})