ਸਕ੍ਰੌਲਸਪੀ
ਸਕ੍ਰੌਲ ਸਥਿਤੀ ਦੇ ਅਧਾਰ ਤੇ ਬੂਟਸਟਰੈਪ ਨੈਵੀਗੇਸ਼ਨ ਜਾਂ ਸੂਚੀ ਸਮੂਹ ਭਾਗਾਂ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਅਪਡੇਟ ਕਰੋ ਤਾਂ ਜੋ ਇਹ ਦਰਸਾਉਣ ਲਈ ਕਿ ਵਿਊਪੋਰਟ ਵਿੱਚ ਇਸ ਸਮੇਂ ਕਿਹੜਾ ਲਿੰਕ ਕਿਰਿਆਸ਼ੀਲ ਹੈ।
ਕਿਦਾ ਚਲਦਾ
Scrollspy .activeਐਂਕਰ ( ) ਐਲੀਮੈਂਟਸ ਉੱਤੇ ਕਲਾਸ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ ਜਦੋਂ ਐਂਕਰ ਦੁਆਰਾ ਹਵਾਲਾ <a>ਦਿੱਤੇ ਤੱਤ ਨੂੰ ਦ੍ਰਿਸ਼ ਵਿੱਚ ਸਕ੍ਰੋਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। Scrollspy ਨੂੰ ਇੱਕ Bootstrap nav ਕੰਪੋਨੈਂਟ ਜਾਂ ਸੂਚੀ ਸਮੂਹ ਦੇ ਨਾਲ ਸਭ ਤੋਂ ਵਧੀਆ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ , ਪਰ ਇਹ ਮੌਜੂਦਾ ਪੰਨੇ ਵਿੱਚ ਕਿਸੇ ਵੀ ਐਂਕਰ ਤੱਤਾਂ ਨਾਲ ਵੀ ਕੰਮ ਕਰੇਗਾ। ਇੱਥੇ ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ।idhref
-
ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਸਕ੍ਰੌਲਸਪੀ ਨੂੰ ਦੋ ਚੀਜ਼ਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ: ਇੱਕ ਨੈਵੀਗੇਸ਼ਨ, ਸੂਚੀ ਸਮੂਹ, ਜਾਂ ਲਿੰਕਾਂ ਦਾ ਇੱਕ ਸਧਾਰਨ ਸੈੱਟ, ਨਾਲ ਹੀ ਇੱਕ ਸਕ੍ਰੌਲ ਕਰਨ ਯੋਗ ਕੰਟੇਨਰ। ਸਕ੍ਰੌਲ ਕਰਨ ਯੋਗ ਕੰਟੇਨਰ ਇੱਕ ਸੈੱਟ ਅਤੇ
<body>ਨਾਲ ਇੱਕ ਕਸਟਮ ਐਲੀਮੈਂਟ ਹੋ ਸਕਦਾ ਹੈ ।heightoverflow-y: scroll -
ਸਕ੍ਰੌਲ ਕਰਨ ਯੋਗ ਕੰਟੇਨਰ 'ਤੇ, ਜੋੜੋ
data-bs-spy="scroll"ਅਤੇ ਸੰਬੰਧਿਤ ਨੈਵੀਗੇਸ਼ਨ ਦੀ ਵਿਲੱਖਣdata-bs-target="#navId"ਕਿੱਥੇ ਹੈ। ਕੀਬੋਰਡ ਪਹੁੰਚ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਇੱਕ ਨੂੰ ਵੀ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ।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>
Nested nav
Scrollspy ਵੀ ਨੇਸਟਡ .navs ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ. ਜੇਕਰ ਆਲ੍ਹਣਾ .navਹੈ .active, ਤਾਂ ਇਸਦੇ ਮਾਪੇ ਵੀ ਹੋਣਗੇ .active। ਨਵਬਾਰ ਦੇ ਅਗਲੇ ਖੇਤਰ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰੋ ਅਤੇ ਸਰਗਰਮ ਕਲਾਸ ਤਬਦੀਲੀ ਦੇਖੋ।
ਆਈਟਮ 1
ਇਹ scrollspy ਪੰਨੇ ਲਈ ਕੁਝ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ ਹੈ. ਨੋਟ ਕਰੋ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਪੰਨੇ ਨੂੰ ਹੇਠਾਂ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋ, ਉਚਿਤ ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ ਉਜਾਗਰ ਹੁੰਦਾ ਹੈ। ਇਹ ਪੂਰੇ ਕੰਪੋਨੈਂਟ ਉਦਾਹਰਨ ਵਿੱਚ ਦੁਹਰਾਇਆ ਜਾਂਦਾ ਹੈ। ਅਸੀਂ ਸਕ੍ਰੋਲਿੰਗ ਅਤੇ ਹਾਈਲਾਈਟਿੰਗ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਇੱਥੇ ਕੁਝ ਹੋਰ ਉਦਾਹਰਣ ਕਾਪੀ ਜੋੜਦੇ ਰਹਿੰਦੇ ਹਾਂ।
ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ JavaScript ਪਲੱਗਇਨ ਉਹਨਾਂ ਸਾਰਿਆਂ ਵਿੱਚੋਂ ਸਹੀ ਤੱਤ ਚੁਣਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਦਿਖਾਈ ਦੇ ਸਕਦੇ ਹਨ। ਇੱਕੋ ਸਮੇਂ ਕਈ ਦਿਸਣ ਵਾਲੇ ਸਕ੍ਰੌਲਸਪੀ ਟੀਚੇ ਕੁਝ ਸਮੱਸਿਆਵਾਂ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੇ ਹਨ।
ਆਈਟਮ 1-1
ਇਹ scrollspy ਪੰਨੇ ਲਈ ਕੁਝ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ ਹੈ. ਨੋਟ ਕਰੋ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਪੰਨੇ ਨੂੰ ਹੇਠਾਂ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋ, ਉਚਿਤ ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ ਉਜਾਗਰ ਹੁੰਦਾ ਹੈ। ਇਹ ਪੂਰੇ ਕੰਪੋਨੈਂਟ ਉਦਾਹਰਨ ਵਿੱਚ ਦੁਹਰਾਇਆ ਜਾਂਦਾ ਹੈ। ਅਸੀਂ ਸਕ੍ਰੋਲਿੰਗ ਅਤੇ ਹਾਈਲਾਈਟਿੰਗ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਇੱਥੇ ਕੁਝ ਹੋਰ ਉਦਾਹਰਣ ਕਾਪੀ ਜੋੜਦੇ ਰਹਿੰਦੇ ਹਾਂ।
ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ JavaScript ਪਲੱਗਇਨ ਉਹਨਾਂ ਸਾਰਿਆਂ ਵਿੱਚੋਂ ਸਹੀ ਤੱਤ ਚੁਣਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਦਿਖਾਈ ਦੇ ਸਕਦੇ ਹਨ। ਇੱਕੋ ਸਮੇਂ ਕਈ ਦਿਸਣ ਵਾਲੇ ਸਕ੍ਰੌਲਸਪੀ ਟੀਚੇ ਕੁਝ ਸਮੱਸਿਆਵਾਂ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੇ ਹਨ।
ਆਈਟਮ 1-2
ਇਹ scrollspy ਪੰਨੇ ਲਈ ਕੁਝ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ ਹੈ. ਨੋਟ ਕਰੋ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਪੰਨੇ ਨੂੰ ਹੇਠਾਂ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋ, ਉਚਿਤ ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ ਉਜਾਗਰ ਹੁੰਦਾ ਹੈ। ਇਹ ਪੂਰੇ ਕੰਪੋਨੈਂਟ ਉਦਾਹਰਨ ਵਿੱਚ ਦੁਹਰਾਇਆ ਜਾਂਦਾ ਹੈ। ਅਸੀਂ ਸਕ੍ਰੋਲਿੰਗ ਅਤੇ ਹਾਈਲਾਈਟਿੰਗ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਇੱਥੇ ਕੁਝ ਹੋਰ ਉਦਾਹਰਣ ਕਾਪੀ ਜੋੜਦੇ ਰਹਿੰਦੇ ਹਾਂ।
ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ JavaScript ਪਲੱਗਇਨ ਉਹਨਾਂ ਸਾਰਿਆਂ ਵਿੱਚੋਂ ਸਹੀ ਤੱਤ ਚੁਣਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਦਿਖਾਈ ਦੇ ਸਕਦੇ ਹਨ। ਇੱਕੋ ਸਮੇਂ ਕਈ ਦਿਸਣ ਵਾਲੇ ਸਕ੍ਰੌਲਸਪੀ ਟੀਚੇ ਕੁਝ ਸਮੱਸਿਆਵਾਂ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੇ ਹਨ।
ਆਈਟਮ 2
ਇਹ scrollspy ਪੰਨੇ ਲਈ ਕੁਝ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ ਹੈ. ਨੋਟ ਕਰੋ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਪੰਨੇ ਨੂੰ ਹੇਠਾਂ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋ, ਉਚਿਤ ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ ਉਜਾਗਰ ਹੁੰਦਾ ਹੈ। ਇਹ ਪੂਰੇ ਕੰਪੋਨੈਂਟ ਉਦਾਹਰਨ ਵਿੱਚ ਦੁਹਰਾਇਆ ਜਾਂਦਾ ਹੈ। ਅਸੀਂ ਸਕ੍ਰੋਲਿੰਗ ਅਤੇ ਹਾਈਲਾਈਟਿੰਗ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਇੱਥੇ ਕੁਝ ਹੋਰ ਉਦਾਹਰਣ ਕਾਪੀ ਜੋੜਦੇ ਰਹਿੰਦੇ ਹਾਂ।
ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ JavaScript ਪਲੱਗਇਨ ਉਹਨਾਂ ਸਾਰਿਆਂ ਵਿੱਚੋਂ ਸਹੀ ਤੱਤ ਚੁਣਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਦਿਖਾਈ ਦੇ ਸਕਦੇ ਹਨ। ਇੱਕੋ ਸਮੇਂ ਕਈ ਦਿਸਣ ਵਾਲੇ ਸਕ੍ਰੌਲਸਪੀ ਟੀਚੇ ਕੁਝ ਸਮੱਸਿਆਵਾਂ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੇ ਹਨ।
ਆਈਟਮ 3
ਇਹ scrollspy ਪੰਨੇ ਲਈ ਕੁਝ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ ਹੈ. ਨੋਟ ਕਰੋ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਪੰਨੇ ਨੂੰ ਹੇਠਾਂ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋ, ਉਚਿਤ ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ ਉਜਾਗਰ ਹੁੰਦਾ ਹੈ। ਇਹ ਪੂਰੇ ਕੰਪੋਨੈਂਟ ਉਦਾਹਰਨ ਵਿੱਚ ਦੁਹਰਾਇਆ ਜਾਂਦਾ ਹੈ। ਅਸੀਂ ਸਕ੍ਰੋਲਿੰਗ ਅਤੇ ਹਾਈਲਾਈਟਿੰਗ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਇੱਥੇ ਕੁਝ ਹੋਰ ਉਦਾਹਰਣ ਕਾਪੀ ਜੋੜਦੇ ਰਹਿੰਦੇ ਹਾਂ।
ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ JavaScript ਪਲੱਗਇਨ ਉਹਨਾਂ ਸਾਰਿਆਂ ਵਿੱਚੋਂ ਸਹੀ ਤੱਤ ਚੁਣਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਦਿਖਾਈ ਦੇ ਸਕਦੇ ਹਨ। ਇੱਕੋ ਸਮੇਂ ਕਈ ਦਿਸਣ ਵਾਲੇ ਸਕ੍ਰੌਲਸਪੀ ਟੀਚੇ ਕੁਝ ਸਮੱਸਿਆਵਾਂ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੇ ਹਨ।
ਆਈਟਮ 3-1
ਇਹ scrollspy ਪੰਨੇ ਲਈ ਕੁਝ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ ਹੈ. ਨੋਟ ਕਰੋ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਪੰਨੇ ਨੂੰ ਹੇਠਾਂ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋ, ਉਚਿਤ ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ ਉਜਾਗਰ ਹੁੰਦਾ ਹੈ। ਇਹ ਪੂਰੇ ਕੰਪੋਨੈਂਟ ਉਦਾਹਰਨ ਵਿੱਚ ਦੁਹਰਾਇਆ ਜਾਂਦਾ ਹੈ। ਅਸੀਂ ਸਕ੍ਰੋਲਿੰਗ ਅਤੇ ਹਾਈਲਾਈਟਿੰਗ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਇੱਥੇ ਕੁਝ ਹੋਰ ਉਦਾਹਰਣ ਕਾਪੀ ਜੋੜਦੇ ਰਹਿੰਦੇ ਹਾਂ।
ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ JavaScript ਪਲੱਗਇਨ ਉਹਨਾਂ ਸਾਰਿਆਂ ਵਿੱਚੋਂ ਸਹੀ ਤੱਤ ਚੁਣਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਦਿਖਾਈ ਦੇ ਸਕਦੇ ਹਨ। ਇੱਕੋ ਸਮੇਂ ਕਈ ਦਿਸਣ ਵਾਲੇ ਸਕ੍ਰੌਲਸਪੀ ਟੀਚੇ ਕੁਝ ਸਮੱਸਿਆਵਾਂ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੇ ਹਨ।
ਆਈਟਮ 3-2
ਇਹ scrollspy ਪੰਨੇ ਲਈ ਕੁਝ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ ਹੈ. ਨੋਟ ਕਰੋ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਪੰਨੇ ਨੂੰ ਹੇਠਾਂ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋ, ਉਚਿਤ ਨੈਵੀਗੇਸ਼ਨ ਲਿੰਕ ਉਜਾਗਰ ਹੁੰਦਾ ਹੈ। ਇਹ ਪੂਰੇ ਕੰਪੋਨੈਂਟ ਉਦਾਹਰਨ ਵਿੱਚ ਦੁਹਰਾਇਆ ਜਾਂਦਾ ਹੈ। ਅਸੀਂ ਸਕ੍ਰੋਲਿੰਗ ਅਤੇ ਹਾਈਲਾਈਟਿੰਗ 'ਤੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਇੱਥੇ ਕੁਝ ਹੋਰ ਉਦਾਹਰਣ ਕਾਪੀ ਜੋੜਦੇ ਰਹਿੰਦੇ ਹਾਂ।
ਧਿਆਨ ਵਿੱਚ ਰੱਖੋ ਕਿ JavaScript ਪਲੱਗਇਨ ਉਹਨਾਂ ਸਾਰਿਆਂ ਵਿੱਚੋਂ ਸਹੀ ਤੱਤ ਚੁਣਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਦਿਖਾਈ ਦੇ ਸਕਦੇ ਹਨ। ਇੱਕੋ ਸਮੇਂ ਕਈ ਦਿਸਣ ਵਾਲੇ ਸਕ੍ਰੌਲਸਪੀ ਟੀਚੇ ਕੁਝ ਸਮੱਸਿਆਵਾਂ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦੇ ਹਨ।
<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-groups ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ. ਸੂਚੀ ਸਮੂਹ ਦੇ ਅਗਲੇ ਖੇਤਰ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰੋ ਅਤੇ ਸਰਗਰਮ ਕਲਾਸ ਤਬਦੀਲੀ ਦੇਖੋ।
ਆਈਟਮ 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>
ਗੈਰ-ਦਿੱਖ ਤੱਤ
ਨਜ਼ਰ ਨਹੀਂ ਆਉਣ ਵਾਲੇ ਟਾਰਗੇਟ ਐਲੀਮੈਂਟਸ ਨੂੰ ਅਣਡਿੱਠ ਕਰ ਦਿੱਤਾ ਜਾਵੇਗਾ ਅਤੇ ਉਹਨਾਂ ਨਾਲ ਸੰਬੰਧਿਤ ਨੈਵੀ ਆਈਟਮਾਂ ਨੂੰ .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>
JavaScript ਰਾਹੀਂ
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
ਵਿਕਲਪ
ਜਿਵੇਂ ਕਿ ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਤੁਸੀਂ ਇੱਕ ਵਿਕਲਪ ਨਾਮ ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ 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ਬੈਕਵਰਡ ਅਨੁਕੂਲਤਾ ਰੱਖਣ ਲਈ, ਅਸੀਂ ਦਿੱਤੇ ਗਏ ਨੂੰ ਪਾਰਸ ਕਰਨਾ ਜਾਰੀ ਰੱਖਾਂਗੇ rootMargin, ਪਰ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ v6 ਵਿੱਚ ਹਟਾ ਦਿੱਤਾ ਜਾਵੇਗਾ ।
ਢੰਗ
| ਢੰਗ | ਵਰਣਨ |
|---|---|
dispose |
ਇੱਕ ਤੱਤ ਦੀ ਸਕ੍ਰੌਲਸਪੀ ਨੂੰ ਨਸ਼ਟ ਕਰਦਾ ਹੈ। (DOM ਤੱਤ 'ਤੇ ਸਟੋਰ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ) |
getInstance |
ਇੱਕ DOM ਤੱਤ ਨਾਲ ਸੰਬੰਧਿਤ ਸਕ੍ਰੌਲਸਪੀ ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸਥਿਰ ਢੰਗ। |
getOrCreateInstance |
ਇੱਕ DOM ਐਲੀਮੈਂਟ ਨਾਲ ਸਬੰਧਿਤ ਸਕ੍ਰੌਲਸਪੀ ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਜਾਂ ਇੱਕ ਨਵਾਂ ਬਣਾਉਣ ਲਈ ਸਥਿਰ ਢੰਗ, ਜੇਕਰ ਇਹ ਸ਼ੁਰੂ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਸੀ। |
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...
})