Scrollspy
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸಿ ಅಥವಾ ಸ್ಕ್ರೋಲ್ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ ಗುಂಪು ಘಟಕಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಿ ಪ್ರಸ್ತುತ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್‌ನಲ್ಲಿ ಯಾವ ಲಿಂಕ್ ಸಕ್ರಿಯವಾಗಿದೆ ಎಂಬುದನ್ನು ಸೂಚಿಸುತ್ತದೆ.
ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
ಆಂಕರ್‌ನಿಂದ ಉಲ್ಲೇಖಿಸಲಾದ ಅಂಶವನ್ನು ವೀಕ್ಷಣೆಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಾಗ Scrollspy .activeಆಂಕರ್ ( ) ಅಂಶಗಳ ಮೇಲೆ ವರ್ಗವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. Scrollspy ಅನ್ನು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ನ್ಯಾವ್ ಘಟಕ ಅಥವಾ ಪಟ್ಟಿ ಗುಂಪಿನ ಜೊತೆಯಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ , ಆದರೆ ಇದು ಪ್ರಸ್ತುತ ಪುಟದಲ್ಲಿರುವ ಯಾವುದೇ ಆಂಕರ್ ಅಂಶಗಳೊಂದಿಗೆ ಸಹ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ.<a>idhref
-
ಪ್ರಾರಂಭಿಸಲು, scrollspy ಗೆ ಎರಡು ವಿಷಯಗಳ ಅಗತ್ಯವಿದೆ: ನ್ಯಾವಿಗೇಷನ್, ಪಟ್ಟಿ ಗುಂಪು, ಅಥವಾ ಸರಳವಾದ ಲಿಂಕ್‌ಗಳು, ಜೊತೆಗೆ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಕಂಟೇನರ್. ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಕಂಟೇನರ್
<body>ಒಂದು ಸೆಟ್heightಮತ್ತು ಕಸ್ಟಮ್ ಅಂಶವಾಗಿರಬಹುದುoverflow-y: scroll. -
ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಕಂಟೇನರ್‌ನಲ್ಲಿ, ಸೇರಿಸಿ
data-bs-spy="scroll"ಮತ್ತು ಸಂಬಂಧಿತ ನ್ಯಾವಿಗೇಶನ್‌ನ ಅನನ್ಯತೆdata-bs-target="#navId"ಎಲ್ಲಿದೆ . ಕೀಬೋರ್ಡ್ ಪ್ರವೇಶವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು a ಅನ್ನು ಸಹ ಸೇರಿಸಲು ಮರೆಯದಿರಿ .navIdidtabindex="0" -
ನೀವು "ಪತ್ತೇದಾರಿ" ಧಾರಕವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ
.active, ಸಂಬಂಧಿತ ನ್ಯಾವಿಗೇಷನ್‌ನಲ್ಲಿ ಆಂಕರ್ ಲಿಂಕ್‌ಗಳಿಂದ ವರ್ಗವನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. ಲಿಂಕ್‌ಗಳು ಪರಿಹರಿಸಬಹುದಾದidಗುರಿಗಳನ್ನು ಹೊಂದಿರಬೇಕು, ಇಲ್ಲದಿದ್ದರೆ ಅವುಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ,<a href="#home">home</a>DOM ನಲ್ಲಿರುವ ಯಾವುದನ್ನಾದರೂ ಹೊಂದಿರಬೇಕು<div id="home"></div> -
ಗೋಚರಿಸದ ಗುರಿ ಅಂಶಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ. ಕೆಳಗೆ ಕಾಣಿಸದ ಅಂಶಗಳ ವಿಭಾಗವನ್ನು ನೋಡಿ.
ಉದಾಹರಣೆಗಳು
ನವಬಾರ್
ನ್ಯಾವ್‌ಬಾರ್‌ನ ಕೆಳಗಿನ ಪ್ರದೇಶವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಿ ಮತ್ತು ಸಕ್ರಿಯ ವರ್ಗ ಬದಲಾವಣೆಯನ್ನು ವೀಕ್ಷಿಸಿ. ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು ತೆರೆಯಿರಿ ಮತ್ತು ಡ್ರಾಪ್‌ಡೌನ್ ಐಟಂಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ವೀಕ್ಷಿಸಿ.
ಮೊದಲ ಶೀರ್ಷಿಕೆ
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಎರಡನೇ ಶಿರೋನಾಮೆ
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಮೂರನೇ ಶಿರೋನಾಮೆ
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ನಾಲ್ಕನೇ ಶಿರೋನಾಮೆ
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಐದನೇ ಶಿರೋನಾಮೆ
ಇದು 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>
ನೆಸ್ಟೆಡ್ ನೌ
Scrollspy ಕೂಡ ನೆಸ್ಟೆಡ್ .navs ಜೊತೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಒಂದು ನೆಸ್ಟೆಡ್ .navಆಗಿದ್ದರೆ .active, ಅದರ ಪೋಷಕರು ಕೂಡ ಆಗಿರುತ್ತಾರೆ .active. ನ್ಯಾವ್‌ಬಾರ್‌ನ ಮುಂದಿನ ಪ್ರದೇಶವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಿ ಮತ್ತು ಸಕ್ರಿಯ ವರ್ಗ ಬದಲಾವಣೆಯನ್ನು ವೀಕ್ಷಿಸಿ.
ಐಟಂ 1
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಗೋಚರಿಸುವ ಎಲ್ಲದರ ನಡುವೆ ಸರಿಯಾದ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ. ಒಂದೇ ಸಮಯದಲ್ಲಿ ಬಹು ಗೋಚರ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿ ಗುರಿಗಳು ಕೆಲವು ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.
ಐಟಂ 1-1
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಗೋಚರಿಸುವ ಎಲ್ಲದರ ನಡುವೆ ಸರಿಯಾದ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ. ಒಂದೇ ಸಮಯದಲ್ಲಿ ಬಹು ಗೋಚರ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿ ಗುರಿಗಳು ಕೆಲವು ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.
ಐಟಂ 1-2
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಗೋಚರಿಸುವ ಎಲ್ಲದರ ನಡುವೆ ಸರಿಯಾದ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ. ಒಂದೇ ಸಮಯದಲ್ಲಿ ಬಹು ಗೋಚರ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿ ಗುರಿಗಳು ಕೆಲವು ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.
ಐಟಂ 2
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಗೋಚರಿಸುವ ಎಲ್ಲದರ ನಡುವೆ ಸರಿಯಾದ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ. ಒಂದೇ ಸಮಯದಲ್ಲಿ ಬಹು ಗೋಚರ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿ ಗುರಿಗಳು ಕೆಲವು ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.
ಐಟಂ 3
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಗೋಚರಿಸುವ ಎಲ್ಲದರ ನಡುವೆ ಸರಿಯಾದ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ. ಒಂದೇ ಸಮಯದಲ್ಲಿ ಬಹು ಗೋಚರ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿ ಗುರಿಗಳು ಕೆಲವು ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.
ಐಟಂ 3-1
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಗೋಚರಿಸುವ ಎಲ್ಲದರ ನಡುವೆ ಸರಿಯಾದ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ. ಒಂದೇ ಸಮಯದಲ್ಲಿ ಬಹು ಗೋಚರ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿ ಗುರಿಗಳು ಕೆಲವು ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.
ಐಟಂ 3-2
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್ ಗೋಚರಿಸುವ ಎಲ್ಲದರ ನಡುವೆ ಸರಿಯಾದ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ. ಒಂದೇ ಸಮಯದಲ್ಲಿ ಬಹು ಗೋಚರ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿ ಗುರಿಗಳು ಕೆಲವು ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.
<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-group. ಪಟ್ಟಿ ಗುಂಪಿನ ಮುಂದಿನ ಪ್ರದೇಶವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಿ ಮತ್ತು ಸಕ್ರಿಯ ವರ್ಗ ಬದಲಾವಣೆಯನ್ನು ವೀಕ್ಷಿಸಿ.
ಐಟಂ 1
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಐಟಂ 2
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಐಟಂ 3
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಐಟಂ 4
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
<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 ನ್ಯಾವ್ ಘಟಕಗಳು ಮತ್ತು ಪಟ್ಟಿ ಗುಂಪುಗಳಿಗೆ ಸೀಮಿತವಾಗಿಲ್ಲ, ಆದ್ದರಿಂದ ಇದು <a>ಪ್ರಸ್ತುತ ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿರುವ ಯಾವುದೇ ಆಂಕರ್ ಅಂಶಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಪ್ರದೇಶವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಿ ಮತ್ತು .activeವರ್ಗ ಬದಲಾವಣೆಯನ್ನು ವೀಕ್ಷಿಸಿ.
ಐಟಂ 1
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಐಟಂ 2
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಐಟಂ 3
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಐಟಂ 4
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
ಐಟಂ 5
ಇದು scrollspy ಪುಟಕ್ಕಾಗಿ ಕೆಲವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ವಿಷಯವಾಗಿದೆ. ನೀವು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡುವಾಗ, ಸೂಕ್ತವಾದ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಘಟಕ ಉದಾಹರಣೆಯ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಹೈಲೈಟ್ ಮಾಡುವುದನ್ನು ಒತ್ತಿಹೇಳಲು ನಾವು ಇನ್ನೂ ಕೆಲವು ಉದಾಹರಣೆ ನಕಲನ್ನು ಇಲ್ಲಿ ಸೇರಿಸುತ್ತೇವೆ.
<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ವರ್ಗವನ್ನು ಸ್ವೀಕರಿಸುವುದಿಲ್ಲ. ಗೋಚರವಲ್ಲದ ರ್ಯಾಪರ್‌ನಲ್ಲಿ ಪ್ರಾರಂಭಿಸಲಾದ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿ ನಿದರ್ಶನಗಳು ಎಲ್ಲಾ ಗುರಿ ಅಂಶಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ. refreshಹೊದಿಕೆಯು ಗೋಚರಿಸಿದ ನಂತರ ಗಮನಿಸಬಹುದಾದ ಅಂಶಗಳನ್ನು ಪರಿಶೀಲಿಸಲು ವಿಧಾನವನ್ನು ಬಳಸಿ .
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()
})
})
ಬಳಕೆ
ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ
ನಿಮ್ಮ ಟಾಪ್‌ಬಾರ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿ ನಡವಳಿಕೆಯನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಲು, data-bs-spy="scroll"ನೀವು ಕಣ್ಣಿಡಲು ಬಯಸುವ ಅಂಶಕ್ಕೆ ಸೇರಿಸಿ (ಸಾಮಾನ್ಯವಾಗಿ ಇದು <body>). ನಂತರ ಯಾವುದೇ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಘಟಕದ ಮೂಲ ಅಂಶದ ಅಥವಾ ವರ್ಗದ ಹೆಸರಿನೊಂದಿಗೆ data-bs-targetಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ .id.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>
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
ಆಯ್ಕೆಗಳು
ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದಾದ್ದರಿಂದ, ನೀವು ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಗೆ data-bs-ಸೇರಿಸಬಹುದು data-bs-animation="{value}". ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸುವಾಗ "ಒಂಟೆ ಕೇಸ್" ನಿಂದ "ಕಬಾಬ್-ಕೇಸ್" ಗೆ ಆಯ್ಕೆಯ ಹೆಸರಿನ ಕೇಸ್ ಪ್ರಕಾರವನ್ನು ಬದಲಾಯಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ . ಉದಾಹರಣೆಗೆ, data-bs-custom-class="beautifier"ಬದಲಿಗೆ ಬಳಸಿ data-bs-customClass="beautifier".
ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 5.2.0 ರಂತೆ, ಎಲ್ಲಾ ಘಟಕಗಳು ಪ್ರಾಯೋಗಿಕವಾಗಿ ಕಾಯ್ದಿರಿಸಿದ ಡೇಟಾ ಗುಣಲಕ್ಷಣವನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ data-bs-configಅದು JSON ಸ್ಟ್ರಿಂಗ್‌ನಂತೆ ಸರಳ ಘಟಕ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಇರಿಸಬಹುದು. ಒಂದು ಅಂಶವು data-bs-config='{"delay":0, "title":123}'ಮತ್ತು data-bs-title="456"ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿರುವಾಗ, ಅಂತಿಮ titleಮೌಲ್ಯವಾಗಿರುತ್ತದೆ 456ಮತ್ತು ಪ್ರತ್ಯೇಕ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ನಲ್ಲಿ ನೀಡಲಾದ ಮೌಲ್ಯಗಳನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ data-bs-config. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ನಂತಹ JSON ಮೌಲ್ಯಗಳನ್ನು ಇರಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ data-bs-delay='{"show":0,"hide":150}'.
| ಹೆಸರು | ಮಾದರಿ | ಡೀಫಾಲ್ಟ್ | ವಿವರಣೆ |
|---|---|---|---|
rootMargin |
ಸ್ಟ್ರಿಂಗ್ | 0px 0px -25% |
ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವಾಗ ಛೇದಕ ವೀಕ್ಷಕ ರೂಟ್‌ಮಾರ್ಜಿನ್ ಮಾನ್ಯ ಘಟಕಗಳು. |
smoothScroll |
ಬೂಲಿಯನ್ | false |
ScrollSpy ಗಮನಿಸಬಹುದಾದ ಲಿಂಕ್ ಅನ್ನು ಬಳಕೆದಾರರು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಸುಗಮ ಸ್ಕ್ರೋಲಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. |
target |
ಸ್ಟ್ರಿಂಗ್, DOM ಅಂಶ | null |
Scrollspy ಪ್ಲಗಿನ್ ಅನ್ನು ಅನ್ವಯಿಸಲು ಅಂಶವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. |
threshold |
ಶ್ರೇಣಿ | [0.1, 0.5, 1] |
IntersectionObserver ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವಾಗ ಥ್ರೆಶೋಲ್ಡ್ ಮಾನ್ಯ ಇನ್ಪುಟ್. |
ಅಸಮ್ಮತಿಸಿದ ಆಯ್ಕೆಗಳು
v5.1.3 ರವರೆಗೆ ನಾವು offset& methodಆಯ್ಕೆಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದೆವು, ಅದನ್ನು ಈಗ ಅಸಮ್ಮತಿಗೊಳಿಸಲಾಗಿದೆ ಮತ್ತು ಬದಲಾಯಿಸಲಾಗಿದೆ rootMargin. ಹಿಮ್ಮುಖ ಹೊಂದಾಣಿಕೆಯನ್ನು ಇರಿಸಿಕೊಳ್ಳಲು, ನಾವು ನೀಡಿದ ಪಾರ್ಸ್ ಮಾಡುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತೇವೆ offset, ಆದರೆ ಈ ವೈಶಿಷ್ಟ್ಯವನ್ನು v6rootMargin ನಲ್ಲಿ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ .
ವಿಧಾನಗಳು
| ವಿಧಾನ | ವಿವರಣೆ |
|---|---|
dispose |
ಒಂದು ಅಂಶದ ಸ್ಕ್ರೋಲ್‌ಸ್ಪಿಯನ್ನು ನಾಶಪಡಿಸುತ್ತದೆ. (DOM ಅಂಶದಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾದ ಡೇಟಾವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ) |
getInstance |
DOM ಅಂಶದೊಂದಿಗೆ ಸಂಯೋಜಿತವಾಗಿರುವ scrollspy ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ಸ್ಥಿರ ವಿಧಾನ. |
getOrCreateInstance |
DOM ಅಂಶದೊಂದಿಗೆ ಸಂಯೋಜಿತವಾಗಿರುವ scrollspy ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ಅಥವಾ ಅದನ್ನು ಪ್ರಾರಂಭಿಸದಿದ್ದಲ್ಲಿ ಹೊಸದನ್ನು ರಚಿಸಲು ಸ್ಥಿರ ವಿಧಾನ. |
refresh |
DOM ನಲ್ಲಿ ಅಂಶಗಳನ್ನು ಸೇರಿಸುವಾಗ ಅಥವಾ ತೆಗೆದುಹಾಕುವಾಗ, ನೀವು ರಿಫ್ರೆಶ್ ವಿಧಾನವನ್ನು ಕರೆಯಬೇಕಾಗುತ್ತದೆ. |
ರಿಫ್ರೆಶ್ ವಿಧಾನವನ್ನು ಬಳಸುವ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})
ಕಾರ್ಯಕ್ರಮಗಳು
| ಈವೆಂಟ್ | ವಿವರಣೆ |
|---|---|
activate.bs.scrollspy |
ಸ್ಕ್ರಾಲ್‌ಸ್ಪೈ ಮೂಲಕ ಆಂಕರ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದಾಗ ಈ ಘಟನೆಯು ಸ್ಕ್ರಾಲ್ ಅಂಶದ ಮೇಲೆ ಉರಿಯುತ್ತದೆ. |
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
// do something...
})