اسکرول اسپی

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

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

Scrollspy کو صحیح طریقے سے کام کرنے کے لیے کچھ تقاضے ہیں:

اگر آپ ہمارا جاوا اسکرپٹ ماخذ سے بنا رہے ہیں، تو اس کی ضرورت ہےutil.js ۔
اسے Bootstrap nav جزو یا فہرست گروپ پر استعمال کیا جانا چاہیے ۔
Scrollspy position: relative;کو اس عنصر کی ضرورت ہوتی ہے جس کی آپ جاسوسی کر رہے ہیں، عام طور پر <body>۔
کے علاوہ دیگر عناصر کی جاسوسی کرتے وقت <body>، اس بات کو یقینی بنائیں کہ ایک heightسیٹ اور overflow-y: scroll;لاگو ہو۔
اینکرز ( <a>) کی ضرورت ہے اور اس کے ساتھ ایک عنصر کی طرف اشارہ کرنا ضروری ہے id۔

کامیابی کے ساتھ لاگو ہونے پر، آپ کا nav یا فہرست گروپ اس کے مطابق اپ ڈیٹ ہو جائے گا، .activeکلاس کو ان کے متعلقہ اہداف کی بنیاد پر ایک آئٹم سے دوسرے میں منتقل کر دے گا۔

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

چربی

اسکرول اسپی مثال کے لیے پلیس ہولڈر مواد۔ آپ کو بہترین فن تعمیر ملا ہے۔ پاسپورٹ سٹیمپ، وہ کاسموپولیٹن ہے۔ ٹھیک، تازہ، شدید، ہم نے اسے تالا لگا دیا۔ کبھی نہیں سوچا تھا کہ ایک دن میں تمہیں کھو دوں گا۔ وہ آپ کا دل کھاتی ہے۔ آپ کا بوسہ کائناتی ہے، ہر حرکت جادو ہے۔ میرا مطلب ہے وہ، میرا مطلب ہے جیسے وہ ایک ہے۔ سلام پیاروں آئیے ایک سفر کرتے ہیں۔ صرف 4 جولائی کی طرح رات کے مالک! لیکن آپ ضائع ہونے کو ترجیح دیں گے۔

@mdo

اسکرول اسپی مثال کے لیے پلیس ہولڈر مواد۔ 'کیونکہ وہ میوزک اور آرٹسٹ ہے۔ (ہم اس طرح کرتے ہیں) تو آپ جادو سے کھیلنا چاہتے ہیں۔ تو مجھے یہ سب دینے سے پہلے یقین کر لیں۔ میں چل رہا ہوں، میں ہوا پر چل رہا ہوں (آج رات)۔ بات کو چھوڑیں، یہ سب سنا، واک کرنے کا وقت۔

ایک

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

اسکرول اسپی مثال کے لیے پلیس ہولڈر مواد۔ اگر آپ رقص کرنا چاہتے ہیں، اگر آپ یہ سب چاہتے ہیں، تو آپ جانتے ہیں کہ میں وہ لڑکی ہوں جسے آپ کو بلانا چاہیے۔ میں اس طوفان سے گزروں گا۔ تو مجھے آپ کی سالگرہ کے سوٹ میں لانے دو۔ وہ جو دور ہو گیا۔ گزشتہ جمعہ کی رات، ہاں مجھے لگتا ہے کہ ہم نے قانون توڑا، ہمیشہ کہتے ہیں کہ ہم رکنے والے ہیں۔ 'کیونکہ وہ یوکو کا تھوڑا سا ہے، اور وہ تھوڑا سا 'اوہ نہیں' ہے۔ میں چاہتا ہوں کہ جبڑے کا گرنا، آنکھ پھوڑنا، سر گھومنا، جسم کو جھٹکا دینا۔ ہاں، ہم نے اپنے کریڈٹ کارڈز کو زیادہ سے زیادہ کیا اور بار سے باہر نکال دیا۔

اور کچھ اور پلیس ہولڈر مواد، اچھی پیمائش کے لیے۔

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

nested nav کے ساتھ مثال

Scrollspy نیسٹڈ .navایس کے ساتھ بھی کام کرتا ہے۔ اگر گھونسلہ .navہے .activeتو اس کے والدین بھی ہوں گے .active۔ navbar کے ساتھ والے علاقے کو اسکرول کریں اور فعال کلاس کی تبدیلی دیکھیں۔

آئٹم 1

اسکرول اسپی مثال کے لیے پلیس ہولڈر مواد۔ اس کا تعلق آئٹم 1 سے ہے۔ آپ کو میلوں کی اونچائی پر لے جاتا ہے، اتنا اونچا، کیونکہ اسے ایک بین الاقوامی مسکراہٹ مل گئی ہے۔ میرے بستر پر ایک اجنبی ہے، میرے سر میں ایک دھڑکن ہے۔ ارے نہیں. دوسری زندگی میں میں آپ کو رہنے دوں گا۔ کیونکہ میں، میں ہر چیز پر قادر ہوں۔ میرے تاج کی جنگ کے لیے موزوں۔ اپنے والدین کی شراب چوری کرنے اور چھت پر چڑھنے کے لیے استعمال کیا جاتا تھا۔ ٹون، ٹین فٹ اور تیار ہے، اسے اوپر کر دیں کیونکہ اس کا وزن زیادہ ہو رہا ہے۔ اس کی محبت ایک نشے کی طرح ہے۔ مجھے لگتا ہے کہ میں بھول گیا تھا کہ میرے پاس ایک انتخاب تھا۔

آئٹم 1-1

اسکرول اسپی مثال کے لیے پلیس ہولڈر مواد۔ اس کا تعلق آئٹم 1-1 سے ہے۔ آپ کو بہترین فن تعمیر ملا ہے۔ پاسپورٹ سٹیمپ، وہ کاسموپولیٹن ہے۔ ٹھیک، تازہ، شدید، ہم نے اسے تالا لگا دیا۔ کبھی نہیں سوچا تھا کہ ایک دن میں تمہیں کھو دوں گا۔ وہ آپ کا دل کھاتی ہے۔ آپ کا بوسہ کائناتی ہے، ہر حرکت جادو ہے۔ میرا مطلب ہے وہ، میرا مطلب ہے جیسے وہ ایک ہے۔ سلام پیاروں آئیے ایک سفر کرتے ہیں۔ صرف 4 جولائی کی طرح رات کے مالک! لیکن آپ ضائع ہونے کو ترجیح دیں گے۔

آئٹم 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

اسکرول اسپی مثال کے لیے پلیس ہولڈر مواد۔ اس کا تعلق آئٹم 3-2 سے ہے۔ آپ اصلی ہیں، آپ کو تبدیل نہیں کیا جا سکتا۔ ساری رات وہ چل رہے ہیں، تمہارا گانا۔ کیلیفورنیا کی لڑکیاں ہم ناقابل تردید ہیں۔ جیسے پنجرے کے بغیر پرندہ۔ اب کوئی ڈر نہیں، جانے دو اور آزاد ہو جاؤ، میں تم سے غیر مشروط محبت کروں گا۔ میں دیوار پر تحریر دیکھ سکتا ہوں۔ آپ دنیا کا سفر کر سکتے ہیں لیکن گولڈن کوسٹ کے قریب کچھ نہیں آتا۔

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <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 ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-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 ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="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 آئٹم 2 آئٹم 3 آئٹم 4

آئٹم 1

اسکرول اسپی لسٹ گروپ مثال کے لیے پلیس ہولڈر مواد۔ اس کا تعلق آئٹم 1 سے ہے۔ معذرت کی ضرورت نہیں۔ اب کوئی ڈر نہیں، جانے دو اور آزاد ہو جاؤ، میں تم سے غیر مشروط محبت کروں گا۔ گزشتہ جمعہ کی رات. شرمیلا آدمی نہ بنو میں شرط لگاتا ہوں کہ یہ خوبصورت ہے۔ ہائی اسکول کے بعد موسم گرما جب ہم پہلی بار ملے۔ 'کیونکہ وہ میوزک اور آرٹسٹ ہے۔ کیا؟ انتظار کرو۔ سوچا کہ میں اس سے مستثنیٰ ہوں۔

آئٹم 2

اسکرول اسپی لسٹ گروپ مثال کے لیے پلیس ہولڈر مواد۔ اس کا تعلق آئٹم 2 سے ہے۔ ہاں، وہ اپنی ہی تھاپ پر رقص کرتی ہے۔ ارے نہیں. تم سب سے بڑے ہو سکتے تھے۔ 'کیونکہ، بچے، تم ایک آتش بازی ہو. شاید ایک وجہ ہے کہ سارے دروازے بند ہیں۔ اپنے دل کو کھولیں اور اسے شروع کرنے دیں۔ بہت وضع دار، ہاں، وہ ایک کلاسک ہے۔

آئٹم 3

اسکرول اسپی لسٹ گروپ مثال کے لیے پلیس ہولڈر مواد۔ اس کا تعلق آئٹم 3 سے ہے۔ ہم اوپر سے اوپر جاتے ہیں۔ ایک دوسرے کے بغیر کبھی نہیں، ہم نے ایک معاہدہ کیا۔ میں ہوا پر چل رہا ہوں۔ کسی نے کہا کہ آپ نے اپنا ٹیٹو ہٹا دیا ہے۔ اب میں تتلی کی طرح تیر رہا ہوں۔ ٹون، ٹین فٹ اور تیار ہے، اسے اوپر کر دیں کیونکہ اس کا وزن زیادہ ہو رہا ہے۔ کیونکہ ایک بار تم میرے ہو، ایک بار تم میرے ہو. آپ کو صرف روشنی کو جلانا ہے اور اسے چمکنے دینا ہے! تو ہم نے بلیوارڈ کو مارا۔ کیا آپ کو کبھی محسوس ہوتا ہے، اتنا کاغذ پتلا محسوس ہوتا ہے۔ میں یہ سب دیکھ رہا ہوں، میں اب دیکھ رہا ہوں۔

آئٹم 4

اسکرول اسپی لسٹ گروپ مثال کے لیے پلیس ہولڈر مواد۔ اس کا تعلق آئٹم 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 data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <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-spy="scroll"کرنے کے لیے، اس عنصر میں شامل کریں جس کی آپ جاسوسی کرنا چاہتے ہیں (عام طور پر یہ ہوگا <body>)۔ پھر کسی بھی بوٹسٹریپ جزو data-targetکے بنیادی عنصر کی ID یا کلاس کے ساتھ وصف شامل کریں۔.nav

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

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

اپنا سی ایس ایس شامل کرنے کے بعد position: relative;، جاوا اسکرپٹ کے ذریعے اسکرول اسپی کو کال کریں:

$('body').scrollspy({ target: '#navbar-example' })

قابل حل ID اہداف درکار ہیں۔

Navbar لنکس میں قابل حل شناختی اہداف ہونے چاہئیں۔ مثال کے طور پر، <a href="#home">home</a>DOM میں کسی چیز کے مطابق ہونا چاہیے جیسے <div id="home"></div>.

غیر `:visible`ہدف والے عناصر کو نظر انداز کر دیا گیا۔

ہدف والے عناصر جو :visiblejQuery کے مطابق نہیں ہیں نظر انداز کر دیے جائیں گے اور ان کے متعلقہ NAV آئٹمز کو کبھی بھی ہائی لائٹ نہیں کیا جائے گا۔

طریقے

`.scrollspy('refresh')`

DOM سے عناصر کو شامل کرنے یا ہٹانے کے ساتھ مل کر scrollspy کا استعمال کرتے وقت، آپ کو ریفریش طریقہ کو اس طرح کال کرنے کی ضرورت ہوگی:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

`.scrollspy('dispose')`

ایک عنصر کی اسکرول اسپی کو تباہ کرتا ہے۔

اختیارات

اختیارات کو ڈیٹا انتساب یا جاوا اسکرپٹ کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-offset=""۔

نام	قسم	طے شدہ	تفصیل
آفسیٹ	نمبر	10	اسکرول کی پوزیشن کا حساب لگاتے وقت اوپر سے آفسیٹ کرنے کے لیے پکسلز۔
طریقہ	تار	آٹو	معلوم کرتا ہے کہ جاسوسی عنصر کس سیکشن میں ہے۔ `auto`سکرول کوآرڈینیٹ حاصل کرنے کے لیے بہترین طریقہ کا انتخاب کرے گا۔ `offset`اسکرول کوآرڈینیٹ حاصل کرنے کے لیے jQuery آفسیٹ طریقہ استعمال کرے گا۔ `position`اسکرول کوآرڈینیٹ حاصل کرنے کے لیے jQuery پوزیشن کا طریقہ استعمال کرے گا۔
ہدف	تار \| jQuery آبجیکٹ \| DOM عنصر		Scrollspy پلگ ان کو لاگو کرنے کے لیے عنصر کی وضاحت کرتا ہے۔

تقریبات

واقعہ کی قسم	تفصیل
activate.bs.scrollspy	جب بھی اسکرول اسپی کے ذریعہ کوئی نیا آئٹم فعال ہوجاتا ہے تو یہ واقعہ اسکرول عنصر پر فائر ہوجاتا ہے۔

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})

اسکرول اسپی

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

navbar میں مثال

چربی

@mdo

ایک

two

three

nested nav کے ساتھ مثال

آئٹم 1

آئٹم 1-1

آئٹم 1-2

Item 2

Item 3

Item 3-1

Item 3-2

فہرست گروپ کے ساتھ مثال

آئٹم 1

آئٹم 2

آئٹم 3

آئٹم 4

استعمال

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

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

قابل حل ID اہداف درکار ہیں۔

غیر :visibleہدف والے عناصر کو نظر انداز کر دیا گیا۔

طریقے

.scrollspy('refresh')

.scrollspy('dispose')

اختیارات

تقریبات

غیر `:visible`ہدف والے عناصر کو نظر انداز کر دیا گیا۔

`.scrollspy('refresh')`

`.scrollspy('dispose')`