اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
in English

scrollspy

په اتوماتيک ډول د بوټسټریپ نیویګیشن تازه کړئ یا د سکرول موقعیت پراساس د ګروپ اجزا لیست کړئ ترڅو وښیې چې کوم لینک اوس مهال په لید پورټ کې فعال دی.

په دې پاڼه کې

څنګه کار کوي

Scrollspy د سم کار کولو لپاره یو څو اړتیاوې لري:

  • دا باید د Bootstrap nav برخې یا لیست ګروپ کې وکارول شي .
  • Scrollspy position: relative;هغه عنصر ته اړتیا لري چې تاسو یې جاسوسي کوئ، معمولا د <body>.
  • اینکرونه ( <a>) اړین دي او باید د دې سره یو عنصر ته اشاره وکړي id.

کله چې په بریالیتوب سره پلي شي، ستاسو د نیوی یا لیست ګروپ به د دې مطابق تازه شي، .activeټولګي د دوی اړوند اهدافو پراساس له یو توکي څخه بل ته حرکت کوي.

د سکرول وړ کانټینرونه او کیبورډ لاسرسی

که تاسو د سکرول کولو وړ کانټینر جوړوئ (د <body>) څخه پرته، ډاډ ترلاسه کړئ چې یو heightسیټ ولرئ او overflow-y: scroll;په هغې باندې پلي کړئ — د tabindex="0"کیبورډ لاسرسي ډاډ ترلاسه کولو لپاره.

په navbar کې مثال

د نیوبار لاندې ساحه سکرول کړئ او د فعال ټولګي بدلون وګورئ. د ښکته کولو توکي به هم روښانه شي.

لومړی سرلیک

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

دوهم سرلیک

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

دریم سرلیک

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

څلورم سرلیک

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

پنځم سرلیک

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

<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 .navs سره کار کوي. که ځنځیر .navوي .active، مور او پلار به یې هم وي .active. د نیوبار تر څنګ ساحه سکرول کړئ او د فعال ټولګي بدلون وګورئ.

توکي 1

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

توکي 1-1

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

توکي 1-2

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

توکي 2

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

توکي 3

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

توکي 3-1

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

توکي 3-2

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

<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 پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

توکي 2

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

توکي 3

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

توکي 4

دا د scrollspy پاڼې لپاره ځینې ځای لرونکي مینځپانګې دي. په یاد ولرئ لکه څنګه چې تاسو پا pageه ښکته کوئ ، مناسب نیویګیشن لینک روښانه شوی. دا د ټولې برخې مثال کې تکرار شوی. موږ دلته د سکرول کولو او روښانه کولو ټینګار کولو لپاره یو څه نور مثال کاپي اضافه کوو.

<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د هر بوټسټریپ .navبرخې د اصلي عنصر ID یا ټولګي سره صفت اضافه کړئ.

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 لینکونه باید د حل وړ ID اهداف ولري. د مثال په توګه، یو <a href="#home">home</a>باید په DOM کې د یو څه سره مطابقت ولري لکه <div id="home"></div>.

د نه لیدلو هدف عناصر له پامه غورځول شوي

په نښه شوي عناصر چې نه لیدل کیږي له پامه غورځول کیږي او د دوی اړوند نیوی توکي به هیڅکله روښانه نشي.

میتودونه

تازه کول

کله چې د DOM څخه د عناصرو اضافه کولو یا لرې کولو سره په ګډه سکرولسپي وکاروئ ، تاسو اړتیا لرئ د ریفریش میتود ته زنګ ووهئ لکه:

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

تصفیه کول

د یو عنصر سکرول سپی له منځه وړي. (د DOM عنصر کې زیرمه شوي معلومات لرې کوي)

getInstance

جامد میتود چې تاسو ته اجازه درکوي د سکرول سپي مثال ترلاسه کړئ چې د DOM عنصر سره تړاو لري

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

getOrCreateInstance

جامد میتود چې تاسو ته اجازه درکوي د 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...
})