مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
in English

اسکرول اسپی

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

اس صفحہ پر

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

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

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں 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...
})