اسکرول اسپی

بوٹسٹریپ نیویگیشن کو خود بخود اپ ڈیٹ کریں یا اسکرول پوزیشن کی بنیاد پر گروپ کے اجزاء کی فہرست بنائیں تاکہ اس بات کی نشاندہی کی جا سکے کہ فی الحال ویو پورٹ میں کون سا لنک فعال ہے۔

اس صفحہ پر

یہ کیسے کام کرتا ہے

اسکرولسپی .activeکلاس کو اینکر ( <a>) عناصر پر ٹوگل کرتا ہے جب idاینکر کے ذریعہ حوالہ والے عنصر hrefکو منظر میں سکرول کیا جاتا ہے۔ Scrollspy کو Bootstrap nav جزو یا فہرست گروپ کے ساتھ مل کر استعمال کیا جاتا ہے ، لیکن یہ موجودہ صفحہ میں کسی بھی اینکر عناصر کے ساتھ بھی کام کرے گا۔ یہ کیسے کام کرتا ہے۔

شروع کرنے کے لیے، scrollspy کو دو چیزوں کی ضرورت ہوتی ہے: ایک نیویگیشن، فہرست گروپ، یا لنکس کا ایک سادہ سیٹ، نیز ایک سکرول کنٹینر۔ سکرول ایبل کنٹینر سیٹ اور <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>
ہدف والے عناصر جو نظر نہیں آتے نظر انداز کر دیے جائیں گے۔ ذیل میں غیر مرئی عناصر کا سیکشن دیکھیں ۔

مثالیں

navbar کے نیچے کے علاقے کو اسکرول کریں اور فعال کلاس کی تبدیلی دیکھیں۔ ڈراپ ڈاؤن مینو کھولیں اور دیکھیں کہ ڈراپ ڈاؤن آئٹمز کو بھی ہائی لائٹ کیا جاتا ہے۔

پہلی سرخی

یہ 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 نیسٹڈ .navایس کے ساتھ بھی کام کرتا ہے۔ اگر گھونسلہ .navہے .activeتو اس کے والدین بھی ہوں گے .active۔ navbar کے ساتھ والے علاقے کو اسکرول کریں اور فعال کلاس کی تبدیلی دیکھیں۔

آئٹم 1

ذہن میں رکھیں کہ جاوا اسکرپٹ پلگ ان ان تمام چیزوں میں سے صحیح عنصر کو منتخب کرنے کی کوشش کرتا ہے جو نظر آ سکتے ہیں۔ ایک ہی وقت میں متعدد نظر آنے والے اسکرول اسپی اہداف کچھ مسائل کا سبب بن سکتے ہیں۔

آئٹم 1-1

آئٹم 1-2

آئٹم 2

آئٹم 3

آئٹم 3-1

آئٹم 3-2

<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 آئٹم 2 آئٹم 3 آئٹم 4

آئٹم 1

آئٹم 2

آئٹم 3

آئٹم 4

<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کلاس کی تبدیلی دیکھیں۔

آئٹم 1 آئٹم 2 آئٹم 3 آئٹم 4 آئٹم 5

آئٹم 1

آئٹم 2

آئٹم 3

آئٹم 4

آئٹم 5

<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>

غیر مرئی عناصر

ٹارگٹ عناصر جو نظر نہیں آتے نظر انداز کر دیے جائیں گے اور ان کے متعلقہ NAV آئٹمز کو .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>

جاوا اسکرپٹ کے ذریعے

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 عنصر کے ساتھ منسلک 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...
})

اسکرول اسپی

یہ کیسے کام کرتا ہے

مثالیں

نوبار

پہلی سرخی

دوسری سرخی

تیسری سرخی

چوتھی سرخی ۔

پانچویں سرخی

Nested nav

آئٹم 1

آئٹم 1-1

آئٹم 1-2

آئٹم 2

آئٹم 3

آئٹم 3-1

آئٹم 3-2

فہرست گروپ

آئٹم 1

آئٹم 2

آئٹم 3

آئٹم 4

سادہ اینکرز

آئٹم 1

آئٹم 2

آئٹم 3

آئٹم 4

آئٹم 5

غیر مرئی عناصر

استعمال

ڈیٹا اوصاف کے ذریعے

جاوا اسکرپٹ کے ذریعے

اختیارات

طریقے

تقریبات