স্ক্রলস্পাই
ভিউপোর্টে বর্তমানে কোন লিঙ্কটি সক্রিয় তা নির্দেশ করতে স্ক্রোল অবস্থানের উপর ভিত্তি করে বুটস্ট্র্যাপ নেভিগেশন বা তালিকা গ্রুপ উপাদানগুলি স্বয়ংক্রিয়ভাবে আপডেট করুন।
কিভাবে এটা কাজ করে
Scrollspy সঠিকভাবে কাজ করার জন্য কিছু প্রয়োজনীয়তা আছে:
- এটি একটি বুটস্ট্র্যাপ নেভি উপাদান বা তালিকা গ্রুপে ব্যবহার করা আবশ্যক ।
position: relative;আপনি যে উপাদানটির উপর গুপ্তচরবৃত্তি করছেন তার জন্য Scrollspy প্রয়োজন<body>, সাধারণত- অ্যাঙ্কর (
<a>) প্রয়োজন এবং এটির সাথে একটি উপাদান নির্দেশ করতে হবেid।
.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 সহ উদাহরণ
স্ক্রোলস্পাই নেস্টেড এস এর সাথেও কাজ করে .nav। বাসা বাঁধলে .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প্যারেন্ট এলিমেন্টের আইডি বা ক্লাসের সাথে অ্যাট্রিবিউট যোগ করুন।.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>
জাভাস্ক্রিপ্টের মাধ্যমে
আপনার সিএসএস যোগ করার পরে position: relative;, জাভাস্ক্রিপ্টের মাধ্যমে স্ক্রোলস্পাইকে কল করুন:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
সমাধানযোগ্য আইডি লক্ষ্য প্রয়োজন
Navbar লিঙ্কে অবশ্যই সমাধানযোগ্য আইডি টার্গেট থাকতে হবে। উদাহরণস্বরূপ, একটি <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()
})
নিষ্পত্তি
একটি উপাদান এর scrollspy ধ্বংস. (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...
})