مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

اسڪراول اسپيس

خود بخود بوٽ اسٽريپ نيويگيشن کي اپڊيٽ ڪريو يا اسڪرول پوزيشن جي بنياد تي گروپ جي اجزاء کي لسٽ ڪريو انهي کي ظاهر ڪرڻ لاءِ ته ڪھڙي لنڪ في الحال viewport ۾ سرگرم آھي.

هن صفحي تي

اهو ڪيئن ڪم ڪري ٿو

Scrollspy صحيح ڪم ڪرڻ لاءِ ڪجھ گھربل آھن:

  • اهو لازمي طور تي استعمال ڪيو وڃي Bootstrap nav جزو يا فهرست گروپ .
  • Scrollspy position: relative;ان عنصر جي ضرورت آهي جنهن تي توهان جاسوسي ڪري رهيا آهيو، عام طور تي <body>.
  • اينڪرز ( <a>) گھربل آھن ۽ ان سان گڏ ھڪڙي عنصر ڏانھن اشارو ڪرڻ گھرجي id.

جڏهن ڪاميابيءَ سان لاڳو ٿئي ٿي، توهان جي نيو يا لسٽ گروپ مطابق اپڊيٽ ڪيو ويندو، .activeڪلاس کي هڪ شئي کان ٻئي ڏانهن منتقل ڪندي انهن جي لاڳاپيل هدفن جي بنياد تي.

سکرولبل ڪنٽينرز ۽ ڪيبورڊ جي رسائي

جيڪڏهن توهان هڪ اسڪربل ڪنٽينر ٺاهي رهيا آهيو (کان سواءِ <body>)، پڪ ڪريو ته هڪ heightسيٽ آهي ۽ overflow-y: scroll;ان تي لاڳو ڪيو tabindex="0"وڃي- ڪي بورڊ جي رسائي کي يقيني بڻائڻ لاءِ.

مثال 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 پڻ nested سان ڪم ڪري .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-groupٿو. لسٽ گروپ جي اڳيان واري علائقي کي اسڪرول ڪريو ۽ فعال طبقي جي تبديلي کي ڏسو.

شئي 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>

استعمال

ڊيٽا خاصيتن جي ذريعي

آساني سان شامل ڪرڻ لاءِ scrollspy رويي کي پنھنجي ٽاپبار نيويگيشن ۾، 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;، ڪال ڪريو scrollspy ذريعي JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

حل ڪرڻ جي قابل ID ٽارگيٽ گهربل

نيوبار لنڪس کي حل ڪرڻ جي قابل id ٽارگيٽ هجڻ گهرجن. مثال طور، <a href="#home">home</a>DOM ۾ ڪنهن شيءِ سان ملندڙ جلندڙ هجڻ گهرجي جهڙوڪ <div id="home"></div>.

غير نظر انداز ٽارگيٽ عنصرن کي نظرانداز ڪيو ويو

ھدف وارا عنصر جيڪي نظر نه ايندا آھن انھن کي نظرانداز ڪيو ويندو ۽ انھن سان لاڳاپيل نيوي شيون ڪڏھن به نمايان نه ٿينديون.

طريقا

ريفريش ڪرڻ

جڏهن ڊوم مان عناصر کي شامل ڪرڻ يا ختم ڪرڻ سان گڏ scrollspy استعمال ڪندي، توهان کي ريفريش طريقي کي ڪال ڪرڻ جي ضرورت پوندي جيئن ته:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

نيڪال ڪرڻ

هڪ عنصر جي scrollspy کي تباهه ڪري ٿو. (ڊوم عنصر تي ذخيرو ٿيل ڊيٽا کي هٽائي ٿو)

getInstance

جامد طريقو جيڪو توهان کي حاصل ڪرڻ جي اجازت ڏئي ٿو scrollspy مثال DOM عنصر سان لاڳاپيل

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

جامد طريقو جيڪو توهان کي اجازت ڏئي ٿو scrollspy مثال حاصل ڪرڻ لاءِ DOM عنصر سان لاڳاپيل، يا هڪ نئون ٺاهيو ان صورت ۾ جڏهن اهو شروع نه ڪيو ويو هو

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...
})