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 .nav
s سره کار کوي. که ځنځیر .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-group
s. 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...
})