স্ক্ৰলস্পাই
স্ক্ৰ'ল অৱস্থানৰ ওপৰত ভিত্তি কৰি বুটষ্ট্ৰেপ নেভিগেচন বা তালিকা গোট উপাদানসমূহ স্বয়ংক্ৰিয়ভাৱে আপডেইট কৰিবলে কোনটো সংযোগ বৰ্তমানে দৰ্শনপৰ্টত সক্ৰিয়।
কেনেকৈ কাম কৰে
Scrollspy .activeএ এংকৰ ( ) উপাদানসমূহত শ্ৰেণীটো টগল কৰে যেতিয়া এংকৰৰ দ্বাৰা উল্লেখ কৰা <a>উপাদানটো দৃশ্যত স্ক্ৰল কৰা হয়। Scrollspy এটা Bootstrap nav উপাদান বা তালিকা গোটৰ সৈতে সংযুক্তভাৱে ব্যৱহাৰ কৰাটোৱেই উত্তম , কিন্তু ই বৰ্তমান পৃষ্ঠাত যিকোনো এংকৰ উপাদানৰ সৈতেও কাম কৰিব। ইয়াত ই কেনেকৈ কাম কৰে।idhref
-
আৰম্ভ কৰিবলে, scrollspy ৰ বাবে দুটা বস্তুৰ প্ৰয়োজন: এটা নেভিগেচন, তালিকা গোট, বা সংযোগসমূহৰ এটা সৰল গোট, লগতে এটা স্ক্ৰল কৰিব পৰা ধাৰক। স্ক্ৰ'ল কৰিব পৰা ধাৰকটো হ'ব পাৰে
<body>বা এটা ছেটheightআৰু ৰ সৈতে এটা স্বনিৰ্বাচিত উপাদান হ'ব পাৰেoverflow-y: scroll। -
স্ক্ৰ'লযোগ্য ধাৰকত, যোগ কৰক
data-bs-spy="scroll"আৰু সংশ্লিষ্ট নেভিগেচনৰ অনন্যdata-bs-target="#navId"ক'ত আছে। কিবৰ্ড অভিগম নিশ্চিত কৰিবলৈ এটাও নিশ্চিতভাৱে অন্তৰ্ভুক্ত কৰক ।navIdidtabindex="0" -
আপুনি “স্পাইড” কণ্টেইনাৰটো স্ক্ৰল কৰাৰ সময়ত, এটা
.activeশ্ৰেণী যোগ কৰা হয় আৰু সংশ্লিষ্ট নেভিগেচনৰ ভিতৰত এংকৰ সংযোগসমূহৰ পৰা আঁতৰোৱা হয়। লিংকসমূহৰ সমাধানযোগ্য লক্ষ্য থাকিব লাগিবid, অন্যথা ইয়াক আওকাণ কৰা হয়। উদাহৰণস্বৰূপে, a<a href="#home">home</a>DOM ত কিবা এটাৰ সৈতে মিল খাব লাগিব যেনে<div id="home"></div> -
দৃশ্যমান নোহোৱা লক্ষ্য উপাদানসমূহক আওকাণ কৰা হ’ব। তলৰ অদৃশ্য উপাদানসমূহ অংশ চাওক ।
উদাহৰণ
নৱবৰ
navbar ৰ তলৰ অঞ্চলটো স্ক্ৰল কৰক আৰু সক্ৰিয় শ্ৰেণী সলনি হোৱাটো চাওক। ড্ৰপডাউন মেনু খোলক আৰু ড্ৰপডাউন বস্তুসমূহো হাইলাইট হোৱাটো চাওক।
প্ৰথম শিৰোনাম
এইটো 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>
নেষ্টেড nav
.navScrollspy এ nested s ৰ সৈতেও কাম কৰে । যদি এটা নেষ্টেড .navহয় .active, তেন্তে ইয়াৰ পিতৃ - মাতৃও হ ' ব .active৷ navbar ৰ কাষৰ অঞ্চলটো স্ক্ৰল কৰক আৰু সক্ৰিয় শ্ৰেণী সলনি হোৱাটো চাওক।
বস্তু ১
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
মনত ৰাখিব যে জাভাস্ক্রিপ্ট প্লাগ-ইনে দৃশ্যমান হ'ব পৰা সকলোবোৰৰ মাজৰ পৰা সঠিক উপাদানটো বাছি ল'বলৈ চেষ্টা কৰে। একে সময়তে একাধিক দৃশ্যমান স্ক্ৰলস্পাই লক্ষ্যই কিছুমান সমস্যাৰ সৃষ্টি কৰিব পাৰে।
বস্তু ১-১
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
মনত ৰাখিব যে জাভাস্ক্রিপ্ট প্লাগ-ইনে দৃশ্যমান হ'ব পৰা সকলোবোৰৰ মাজৰ পৰা সঠিক উপাদানটো বাছি ল'বলৈ চেষ্টা কৰে। একে সময়তে একাধিক দৃশ্যমান স্ক্ৰলস্পাই লক্ষ্যই কিছুমান সমস্যাৰ সৃষ্টি কৰিব পাৰে।
বস্তু ১-২
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
মনত ৰাখিব যে জাভাস্ক্রিপ্ট প্লাগ-ইনে দৃশ্যমান হ'ব পৰা সকলোবোৰৰ মাজৰ পৰা সঠিক উপাদানটো বাছি ল'বলৈ চেষ্টা কৰে। একে সময়তে একাধিক দৃশ্যমান স্ক্ৰলস্পাই লক্ষ্যই কিছুমান সমস্যাৰ সৃষ্টি কৰিব পাৰে।
বস্তু ২
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
মনত ৰাখিব যে জাভাস্ক্রিপ্ট প্লাগ-ইনে দৃশ্যমান হ'ব পৰা সকলোবোৰৰ মাজৰ পৰা সঠিক উপাদানটো বাছি ল'বলৈ চেষ্টা কৰে। একে সময়তে একাধিক দৃশ্যমান স্ক্ৰলস্পাই লক্ষ্যই কিছুমান সমস্যাৰ সৃষ্টি কৰিব পাৰে।
বস্তু ৩
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
মনত ৰাখিব যে জাভাস্ক্রিপ্ট প্লাগ-ইনে দৃশ্যমান হ'ব পৰা সকলোবোৰৰ মাজৰ পৰা সঠিক উপাদানটো বাছি ল'বলৈ চেষ্টা কৰে। একে সময়তে একাধিক দৃশ্যমান স্ক্ৰলস্পাই লক্ষ্যই কিছুমান সমস্যাৰ সৃষ্টি কৰিব পাৰে।
বস্তু ৩-১
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
মনত ৰাখিব যে জাভাস্ক্রিপ্ট প্লাগ-ইনে দৃশ্যমান হ'ব পৰা সকলোবোৰৰ মাজৰ পৰা সঠিক উপাদানটো বাছি ল'বলৈ চেষ্টা কৰে। একে সময়তে একাধিক দৃশ্যমান স্ক্ৰলস্পাই লক্ষ্যই কিছুমান সমস্যাৰ সৃষ্টি কৰিব পাৰে।
বস্তু ৩-২
এইটো 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>
তালিকা গোট
.list-groupScrollspy এ s ৰ সৈতেও কাম কৰে । তালিকা গোটৰ কাষৰ অঞ্চলটো স্ক্ৰল কৰক আৰু সক্ৰিয় শ্ৰেণী পৰিৱৰ্তন চাওক।
বস্তু ১
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ২
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ৩
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ৪
এইটো 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 nav উপাদানসমূহ আৰু তালিকা গোটসমূহত সীমাবদ্ধ নহয়, গতিকে ই <a>বৰ্তমান দস্তাবেজৰ যিকোনো এংকৰ উপাদানসমূহত কাম কৰিব। এলেকাটো স্ক্ৰল কৰি .activeশ্ৰেণী সলনি হোৱাটো চাওক।
বস্তু ১
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ২
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ৩
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ৪
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ৫
এইটো 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লক্ষ্য উপাদানসমূহ যি দৃশ্যমান নহয় সেইবোৰ আওকাণ কৰা হ'ব আৰু সিহতৰ সংশ্লিষ্ট nav বস্তুসমূহে এটা শ্ৰেণী লাভ নকৰিব । এটা অদৃশ্য ৰেপাৰত আৰম্ভ কৰা স্ক্ৰলস্পাই উদাহৰণসমূহে সকলো লক্ষ্য উপাদানক আওকাণ কৰিব। 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()
})
})
ব্যৱহাৰ
ডাটা এট্ৰিবিউটৰ জৰিয়তে
আপোনাৰ শীৰ্ষবাৰ নেভিগেচনত সহজে scrollspy আচৰণ যোগ কৰিবলে, data-bs-spy="scroll"আপুনি চোৰাংচোৱাগিৰি কৰিব বিচৰা উপাদানত যোগ কৰক (বেছিভাগ সাধাৰণতে এইটো হ'ব <body>)। তাৰ পিছত যিকোনো Bootstrap উপাদানৰ মূল উপাদানৰ বা শ্ৰেণী নামৰ 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}". ডাটা বৈশিষ্ট্যসমূহৰ জৰিয়তে বিকল্পসমূহ পাছ কৰাৰ সময়ত বিকল্পৰ নামৰ কেছৰ ধৰণ “ camelCase ” ৰ পৰা “ kebab-case ” লৈ সলনি কৰাটো নিশ্চিত কৰক । উদাহৰণস্বৰূপে, data-bs-custom-class="beautifier"ৰ পৰিবৰ্তে ব্যৱহাৰ কৰক data-bs-customClass="beautifier"।
Bootstrap 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% |
স্ক্ৰল অৱস্থান গণনা কৰাৰ সময়ত ছেদ পৰ্যবেক্ষক rootMargin বৈধ এককসমূহ। |
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...
})