Scrollspy
Bootstrap navigatsiyasini avtomatik ravishda yangilang yoki ko'rish oynasida qaysi havola faol ekanligini ko'rsatish uchun aylantirish holatiga qarab guruh komponentlarini ro'yxatlang.
U qanday ishlaydi
Scrollspy to'g'ri ishlashi uchun bir nechta talablarga ega:
- U Bootstrap nav komponentida yoki ro'yxat guruhida ishlatilishi kerak .
- Scrollspy
position: relative;
siz josuslik qilayotgan elementni talab qiladi, odatda<body>
. - Ankrajlar (
<a>
) talab qilinadi va u bilan elementga ishora qilishi kerakid
.
Muvaffaqiyatli amalga oshirilgandan so'ng, navbat yoki ro'yxat guruhingiz mos ravishda yangilanadi .active
va ular bilan bog'liq maqsadlar asosida sinfni bir elementdan ikkinchisiga o'tkazadi.
Qaytib olinadigan konteynerlar va klaviaturadan foydalanish
Agar siz aylantiriladigan konteyner yaratayotgan bo'lsangiz (dan tashqari <body>
), klaviaturadan foydalanishni ta'minlash uchun height
to'plam va overflow-y: scroll;
unga qo'llanilishini unutmang .tabindex="0"
Navbardagi misol
Navbar ostidagi maydonni aylantiring va faol sinf o'zgarishini kuzating. Ochiladigan elementlar ham ta'kidlanadi.
Birinchi sarlavha
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
Ikkinchi sarlavha
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
Uchinchi sarlavha
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
To'rtinchi sarlavha
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
Beshinchi sarlavha
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
<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>
Ichki nav bilan misol
Scrollspy ham ichki o'rnatilgan .nav
s bilan ishlaydi. Agar uyali .nav
bo'lsa .active
, uning ota-onasi ham bo'ladi .active
. Navbar yonidagi maydonni aylantiring va faol sinf o'zgarishini kuzating.
1-modda
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
1-1-band
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
1-2-band
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
2-modda
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
3-modda
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
3-1-band
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
3-2-band
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
<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>
Ro'yxat-guruh bilan misol
Scrollspy .list-group
s bilan ham ishlaydi. Roʻyxat guruhi yonidagi maydonni aylantiring va faol sinf oʻzgarishini kuzating.
1-modda
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
2-modda
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
3-modda
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
4-modda
Bu scrollspy sahifasi uchun ba'zi to'ldiruvchi kontent. Sahifani pastga aylantirganda, tegishli navigatsiya havolasi ta'kidlanganligini unutmang. Bu komponent misolida takrorlanadi. Oʻtkazish va ajratib koʻrsatishni taʼkidlash uchun biz bu yerga yana bir nechta misol nusxasini qoʻshishda davom etamiz.
<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>
Foydalanish
Ma'lumotlar atributlari orqali
Yuqori paneldagi navigatsiyaga osongina scrollspy harakatini qo'shish data-bs-spy="scroll"
uchun josuslik qilmoqchi bo'lgan elementga qo'shing (ko'pincha bu <body>
). Keyin har qanday Bootstrap komponentining data-bs-target
asosiy elementining identifikatori yoki sinfi bilan atributni qo'shing..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>
JavaScript orqali
CSS-ni qo'shgandan so'ng position: relative;
, JavaScript orqali scrollspy-ga qo'ng'iroq qiling:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Yechish mumkin bo'lgan ID maqsadlari talab qilinadi
Navbar havolalarida hal qilinadigan id maqsadlari boʻlishi kerak. Masalan, <a href="#home">home</a>
DOMdagi biror narsaga mos kelishi kerak <div id="home"></div>
.
Koʻrinmaydigan maqsadli elementlar eʼtiborga olinmadi
Ko'rinmaydigan maqsadli elementlar e'tiborga olinmaydi va ularning mos navbatlari hech qachon ta'kidlanmaydi.
Usullari
yangilash
Scrollspy-dan DOM-ga elementlarni qo'shish yoki olib tashlash bilan birgalikda foydalanilganda, siz yangilash usulini shunday chaqirishingiz kerak bo'ladi:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
tasarruf qilish
Elementning scrollspy-ni yo'q qiladi. (DOM elementida saqlangan ma'lumotlarni o'chiradi)
getInstance
DOM elementi bilan bog'langan scrollspy nusxasini olish imkonini beruvchi statik usul
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
DOM elementi bilan bog'langan scrollspy nusxasini olish yoki agar u ishga tushirilmagan bo'lsa, yangisini yaratish imkonini beruvchi statik usul
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Variantlar
Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-bs-
kabi qoʻshing data-bs-offset=""
.
Ism | Turi | Standart | Tavsif |
---|---|---|---|
offset |
raqam | 10 |
O'tkazish joyini hisoblashda yuqoridan siljish uchun piksellar. |
method |
ip | auto |
Ayg'oqchi element qaysi bo'limda ekanligini topadi. auto aylantirish koordinatalarini olishning eng yaxshi usulini tanlaydi. aylantirish koordinatalarini olish offset uchun usuldan foydalanadi . aylantirish koordinatalarini olish uchun va xususiyatlaridan foydalanadi .Element.getBoundingClientRect() position HTMLElement.offsetTop HTMLElement.offsetLeft |
target |
string | jQuery obyekti | DOM elementi | Scrollspy plaginini qo'llash uchun elementni belgilaydi. |
Voqealar
Tadbir turi | Tavsif |
---|---|
activate.bs.scrollspy |
Scrollspy tomonidan yangi element faollashtirilganda, bu hodisa aylantirish elementida yonadi. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})