اسکرول اسپی
بوٹسٹریپ نیویگیشن کو خود بخود اپ ڈیٹ کریں یا اسکرول پوزیشن کی بنیاد پر گروپ کے اجزاء کی فہرست بنائیں تاکہ اس بات کی نشاندہی کی جا سکے کہ فی الحال ویو پورٹ میں کون سا لنک فعال ہے۔
یہ کیسے کام کرتا ہے
Scrollspy کو صحیح طریقے سے کام کرنے کے لیے چند تقاضے ہیں:
- اسے Bootstrap nav جزو یا فہرست گروپ پر استعمال کیا جانا چاہیے ۔
- Scrollspy
position: relative;کو اس عنصر کی ضرورت ہوتی ہے جس کی آپ جاسوسی کر رہے ہیں، عام طور پر<body>۔ - اینکرز (
<a>) کی ضرورت ہے اور اس کے ساتھ ایک عنصر کی طرف اشارہ کرنا ضروری ہےid۔
کامیابی کے ساتھ لاگو ہونے پر، آپ کا nav یا فہرست گروپ اس کے مطابق اپ ڈیٹ ہو جائے گا، .activeکلاس کو ان کے متعلقہ اہداف کی بنیاد پر ایک آئٹم سے دوسرے میں منتقل کر دے گا۔
سکرول کے قابل کنٹینرز اور کی بورڈ تک رسائی
اگر آپ سکرول کرنے کے قابل کنٹینر بنا رہے ہیں (کے علاوہ <body>)، تو یقینی بنائیں کہ کی بورڈ تک رسائی کو یقینی بنانے کے لیے a کے ساتھ ساتھ ایک heightسیٹ اور overflow-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 کے ساتھ مثال
Scrollspy نیسٹڈ .navایس کے ساتھ بھی کام کرتا ہے۔ اگر گھونسلہ .navہے .activeتو اس کے والدین بھی ہوں گے .active۔ navbar کے ساتھ والے علاقے کو اسکرول کریں اور فعال کلاس کی تبدیلی دیکھیں۔
آئٹم 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>
جاوا اسکرپٹ کے ذریعے
اپنا سی ایس ایس شامل کرنے کے بعد position: relative;، جاوا اسکرپٹ کے ذریعے اسکرول اسپی کو کال کریں:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
قابل حل ID کے اہداف درکار ہیں۔
Navbar لنکس میں قابل حل شناختی اہداف ہونے چاہئیں۔ مثال کے طور پر، <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
اختیارات
اختیارات کو ڈیٹا انتساب یا 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...
})