স্ক্ৰলস্পাই
স্ক্ৰ'ল অৱস্থানৰ ওপৰত ভিত্তি কৰি বুটষ্ট্ৰেপ নেভিগেচন বা তালিকা গোট উপাদানসমূহ স্বয়ংক্ৰিয়ভাৱে আপডেইট কৰিবলে কোনটো সংযোগ বৰ্তমানে দৰ্শনপৰ্টত সক্ৰিয়।
কেনেকৈ কাম কৰে
Scrollspy সঠিকভাৱে কাম কৰিবলৈ কেইটামান প্ৰয়োজনীয়তা আছে:
- ইয়াক এটা Bootstrap nav অংশ বা তালিকা গোটত ব্যৱহাৰ কৰিব লাগিব ।
- Scrollspy ৰ প্ৰয়োজন
position: relative;আপুনি চোৰাংচোৱাগিৰি কৰা উপাদানটোৰ ওপৰত, সাধাৰণতে<body>. - এংকৰ (
<a>) ৰ প্ৰয়োজন আৰু তাৰ সৈতে এটা উপাদানলৈ আঙুলিয়াব লাগিবid.
যেতিয়া সফলভাৱে প্ৰণয়ন কৰা হয়, আপোনাৰ nav বা তালিকা গোটে সেই অনুসৰি আপডেইট কৰিব, .activeশ্ৰেণীটোক এটা বস্তুৰ পৰা পৰৱৰ্তীলৈ সিহতৰ সংশ্লিষ্ট লক্ষ্যসমূহৰ ওপৰত ভিত্তি কৰি স্থানান্তৰ কৰি।
স্ক্ৰ'লেবল কণ্টেইনাৰ আৰু কিবৰ্ড অভিগম
যদি আপুনি এটা স্ক্ৰ'ল কৰিব পৰা ধাৰক বনাইছে (ৰ বাহিৰে ), এটা ছেট <body>থকাটো নিশ্চিত কৰক আৰু ইয়াত প্ৰয়োগ কৰা হৈছে— কিবৰ্ড অভিগম সুনিশ্চিত কৰিবলে a ৰ সৈতে।heightoverflow-y: scroll;tabindex="0"
navbar ত উদাহৰণ
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>
nested nav ৰ সৈতে উদাহৰণ
.navScrollspy এ nested s ৰ সৈতেও কাম কৰে । যদি এটা নেষ্টেড .navহয় .active, তেন্তে ইয়াৰ পিতৃ - মাতৃও হ ' ব .active৷ navbar ৰ কাষৰ অঞ্চলটো স্ক্ৰল কৰক আৰু সক্ৰিয় শ্ৰেণী সলনি হোৱাটো চাওক।
বস্তু ১
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ১-১
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ১-২
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ২
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ৩
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ৩-১
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ৩-২
এইটো 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>
list-group ৰ সৈতে উদাহৰণ
.list-groupScrollspy এ s ৰ সৈতেও কাম কৰে । তালিকা গোটৰ কাষৰ অঞ্চলটো স্ক্ৰল কৰক আৰু সক্ৰিয় শ্ৰেণী পৰিৱৰ্তন চাওক।
বস্তু ১
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ২
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ৩
এইটো scrollspy পৃষ্ঠাৰ বাবে কিছুমান স্থানধাৰী বিষয়বস্তু। মন কৰিব যে আপুনি পৃষ্ঠাটো তললৈ স্ক্ৰল কৰাৰ সময়ত, উপযুক্ত নেভিগেচন সংযোগ হাইলাইট কৰা হয়। ইয়াক সমগ্ৰ উপাদানৰ উদাহৰণটোত পুনৰাবৃত্তি কৰা হৈছে। আমি ইয়াত আৰু কিছুমান উদাহৰণ কপি যোগ কৰি থাকোঁ যাতে স্ক্ৰলিং আৰু হাইলাইটিঙত গুৰুত্ব দিব পাৰে।
বস্তু ৪
এইটো 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>
ব্যৱহাৰ
ডাটা এট্ৰিবিউটৰ জৰিয়তে
আপোনাৰ শীৰ্ষবাৰ নেভিগেচনত সহজে scrollspy আচৰণ যোগ কৰিবলে, data-bs-spy="scroll"আপুনি চোৰাংচোৱাগিৰি কৰিব বিচৰা উপাদানত যোগ কৰক (বেছিভাগ সাধাৰণতে এইটো হ'ব <body>)। data-bs-targetতাৰ পিছত যিকোনো Bootstrap উপাদানৰ মূল উপাদানৰ 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;, জাভাস্ক্রিপ্টৰ যোগেদি scrollspy কল কৰক:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
সমাধানযোগ্য আইডি লক্ষ্যৰ প্ৰয়োজন
Navbar সংযোগসমূহৰ সমাধানযোগ্য id লক্ষ্য থাকিব লাগিব। উদাহৰণস্বৰূপে, a <a href="#home">home</a>DOM ত থকা কিবা এটাৰ সৈতে মিল খাব লাগিব যেনে <div id="home"></div>.
অদৃশ্য লক্ষ্য উপাদানসমূহ আওকাণ কৰা হৈছে
লক্ষ্য উপাদানসমূহ যি দৃশ্যমান নহয় সেইবোৰ আওকাণ কৰা হ'ব আৰু সিহতৰ সংশ্লিষ্ট nav বস্তুসমূহ কেতিয়াও হাইলাইট কৰা নহ'ব।
পদ্ধতিসমূহ
সতেজ কৰক
DOM ৰ পৰা উপাদানসমূহ যোগ বা আঁতৰোৱাৰ সৈতে scrollspy ব্যৱহাৰ কৰাৰ সময়ত, আপুনি সতেজ পদ্ধতিক এনেদৰে কল কৰিব লাগিব:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
নিষ্কাশন কৰক
এটা উপাদানৰ স্ক্ৰলস্পাই ধ্বংস কৰে। (DOM উপাদানত সংৰক্ষিত তথ্য আঁতৰায়)
getInstance
স্থিতিশীল পদ্ধতি যি আপোনাক এটা DOM উপাদানৰ সৈতে জড়িত scrollspy উদাহৰণ পাবলৈ অনুমতি দিয়ে
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance ৰ দ্বাৰা প্ৰস্তুত কৰা হৈছে
স্থিতিশীল পদ্ধতি যি আপোনাক এটা DOM উপাদানৰ সৈতে জড়িত scrollspy উদাহৰণ পাবলৈ অনুমতি দিয়ে, বা এটা নতুন সৃষ্টি কৰক যদি ইয়াক আৰম্ভ কৰা হোৱা নাছিল
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...
})