اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
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 also works with .list-groups. Scroll the area next to the list group and watch the active class change.

Item 1

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 2

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 3

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Item 4

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

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

Usage

Via data attributes

To easily add scrollspy behavior to your topbar navigation, add data-bs-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-bs-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

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>

Via JavaScript

After adding position: relative; in your CSS, call the scrollspy via JavaScript:

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

Resolvable ID targets required

Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

Non-visible target elements ignored

Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.

Methods

refresh

When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like so:

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

dispose

Destroys an element’s scrollspy. (Removes stored data on the DOM element)

getInstance

Static method which allows you to get the scrollspy instance associated with a DOM element

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

getOrCreateInstance

Static method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn’t initialized

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-offset="".

Name Type Default Description
offset number 10 Pixels to offset from top when calculating position of scroll.
method string auto Finds which section the spied element is in. auto will choose the best method to get scroll coordinates. offset will use the Element.getBoundingClientRect() method to get scroll coordinates. position will use the HTMLElement.offsetTop and HTMLElement.offsetLeft properties to get scroll coordinates.
target string | jQuery object | DOM element Specifies element to apply Scrollspy plugin.

Events

Event type Description
activate.bs.scrollspy This event fires on the scroll element whenever a new item becomes activated by the scrollspy.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})