ਸਕ੍ਰੌਲਸਪੀ
ਸਕ੍ਰੌਲ ਸਥਿਤੀ ਦੇ ਅਧਾਰ ਤੇ ਬੂਟਸਟਰੈਪ ਨੈਵੀਗੇਸ਼ਨ ਜਾਂ ਸੂਚੀ ਸਮੂਹ ਭਾਗਾਂ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਅਪਡੇਟ ਕਰੋ ਤਾਂ ਜੋ ਇਹ ਦਰਸਾਉਣ ਲਈ ਕਿ ਵਿਊਪੋਰਟ ਵਿੱਚ ਇਸ ਸਮੇਂ ਕਿਹੜਾ ਲਿੰਕ ਕਿਰਿਆਸ਼ੀਲ ਹੈ।
ਕਿਦਾ ਚਲਦਾ
Scrollspy ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਕੁਝ ਲੋੜਾਂ ਹਨ:
- ਇਹ ਇੱਕ ਬੂਟਸਟਰੈਪ ਨੈਵੀ ਕੰਪੋਨੈਂਟ ਜਾਂ ਸੂਚੀ ਸਮੂਹ ਵਿੱਚ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ।
- Scrollspy ਨੂੰ
position: relative;ਉਸ ਤੱਤ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜਿਸਦੀ ਤੁਸੀਂ ਜਾਸੂਸੀ ਕਰ ਰਹੇ ਹੋ, ਆਮ ਤੌਰ 'ਤੇ<body>. - ਐਂਕਰ (
<a>) ਦੀ ਲੋੜ ਹੈ ਅਤੇ ਉਸ ਨਾਲ ਇੱਕ ਤੱਤ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈid।
ਜਦੋਂ ਸਫਲਤਾਪੂਰਵਕ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਡਾ nav ਜਾਂ ਸੂਚੀ ਸਮੂਹ ਉਸ ਅਨੁਸਾਰ ਅੱਪਡੇਟ ਹੋ ਜਾਵੇਗਾ, .activeਕਲਾਸ ਨੂੰ ਉਹਨਾਂ ਦੇ ਸਬੰਧਿਤ ਟੀਚਿਆਂ ਦੇ ਅਧਾਰ 'ਤੇ ਇੱਕ ਆਈਟਮ ਤੋਂ ਅਗਲੀ ਵਿੱਚ ਭੇਜਦਾ ਹੈ।
ਸਕ੍ਰੋਲ ਕਰਨ ਯੋਗ ਕੰਟੇਨਰ ਅਤੇ ਕੀਬੋਰਡ ਐਕਸੈਸ
ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਸਕ੍ਰੋਲ ਕਰਨ ਯੋਗ ਕੰਟੇਨਰ ਬਣਾ ਰਹੇ ਹੋ (ਨੂੰ ਛੱਡ ਕੇ <body>), ਤਾਂ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਕੀਬੋਰਡ ਪਹੁੰਚ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਇੱਕ heightਸੈੱਟ ਹੈ ਅਤੇ overflow-y: scroll;ਇਸ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਗਿਆ ਹੈ।tabindex="0"
ਨਵਬਾਰ ਵਿੱਚ ਉਦਾਹਰਨ
ਨਵਬਾਰ ਦੇ ਹੇਠਾਂ ਖੇਤਰ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰੋ ਅਤੇ ਸਰਗਰਮ ਕਲਾਸ ਤਬਦੀਲੀ ਦੇਖੋ। ਡ੍ਰੌਪਡਾਉਨ ਆਈਟਮਾਂ ਨੂੰ ਵੀ ਉਜਾਗਰ ਕੀਤਾ ਜਾਵੇਗਾ।
ਪਹਿਲਾ ਸਿਰਲੇਖ
ਇਹ 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 ਨਾਲ ਉਦਾਹਰਨ
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-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>
ਵਰਤੋਂ
ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ
ਆਪਣੀ ਟੌਪਬਾਰ ਨੈਵੀਗੇਸ਼ਨ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਸਕ੍ਰੌਲਸਪੀ ਵਿਵਹਾਰ ਨੂੰ ਸ਼ਾਮਲ 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>
JavaScript ਰਾਹੀਂ
ਆਪਣੇ CSS ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਬਾਅਦ position: relative;, JavaScript ਦੁਆਰਾ scrollspy ਨੂੰ ਕਾਲ ਕਰੋ:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
ਹੱਲ ਕਰਨ ਯੋਗ ID ਟੀਚੇ ਲੋੜੀਂਦੇ ਹਨ
ਨਵਬਾਰ ਲਿੰਕਾਂ ਵਿੱਚ ਹੱਲ ਕਰਨ ਯੋਗ id ਟੀਚੇ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ <a href="#home">home</a>DOM ਵਿੱਚ ਕਿਸੇ ਚੀਜ਼ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜਿਵੇਂ ਕਿ <div id="home"></div>.
ਗੈਰ-ਦਿੱਖਣ ਵਾਲੇ ਟੀਚਾ ਤੱਤਾਂ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਗਿਆ
ਟੀਚੇ ਦੇ ਤੱਤ ਜੋ ਦਿਸਦੇ ਨਹੀਂ ਹਨ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕੀਤਾ ਜਾਵੇਗਾ ਅਤੇ ਉਹਨਾਂ ਦੇ ਅਨੁਸਾਰੀ ਨੇਵੀ ਆਈਟਮਾਂ ਨੂੰ ਕਦੇ ਵੀ ਉਜਾਗਰ ਨਹੀਂ ਕੀਤਾ ਜਾਵੇਗਾ।
ਢੰਗ
ਤਾਜ਼ਾ ਕਰੋ
DOM ਤੋਂ ਤੱਤਾਂ ਨੂੰ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਦੇ ਨਾਲ ਸਕ੍ਰੌਲਸਪੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਤੁਹਾਨੂੰ ਰਿਫਰੈਸ਼ ਵਿਧੀ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਕਾਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
ਨਿਪਟਾਰਾ
ਇੱਕ ਤੱਤ ਦੀ ਸਕ੍ਰੌਲਸਪੀ ਨੂੰ ਨਸ਼ਟ ਕਰਦਾ ਹੈ। (DOM ਤੱਤ 'ਤੇ ਸਟੋਰ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ)
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
ਵਿਕਲਪ
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ 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...
})