JS Scrollspy
JS Scrollspy
Scrollspy navigatsiya ro‘yxatidagi havolalarni aylantirish (scroll) holatiga qarab avtomatik ravishda yangilash uchun ishlatiladi.
Scrollspy haqidagi darslik uchun Bootstrap Scrollspy darsligimizni o‘qing.
data-* atributlari orqali
Aylantiriladigan maydon sifatida ishlatiladigan elementga (ko‘pincha bu <body> elementi bo‘ladi) data-spy="scroll" ni qo‘shing.
So‘ngra navigatsiya panelining id’si yoki klass nomini qiymat sifatida olgan data-target atributini qo‘shing (.navbar). Bu navigatsiya paneli aylantiriladigan maydon bilan bog‘langanligini ta’minlaydi.
E’tibor bering, aylantiriladigan elementlar navigatsiya paneli ro‘yxat elementlari ichidagi havolalarning ID’siga mos kelishi kerak (<div id="section1"> <a href="#section1"> ga mos keladi).
Ixtiyoriy data-offset atributi aylantirish holatini hisoblashda yuqoridan necha piksel siljish (offset) olinishini belgilaydi. Bu aylantiriladigan elementlarga o‘tilganda navigatsiya panelidagi havolalar faol holatini juda erta o‘zgartirayotgandek tuyulsa, foydali bo‘ladi. Standart qiymat — 10 piksel.
Nisbiy joylashuv talab qilinadi: data-spy="scroll" atributiga ega element to‘g‘ri ishlashi uchun CSS position xususiyatining qiymati "relative" bo‘lishi kerak.
Misol
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
....
</ul>
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>
O‘zingiz sinab ko‘ring »
JavaScript orqali
Qo‘lda faollashtirish uchun:
Scrollspy parametrlari (options)
Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan, data-offset="".
| Nomi | Turi | Standart | Tavsif | Sinab ko‘ring |
|---|---|---|---|---|
| offset | number | 10 | Aylantirish holatini hisoblashda yuqoridan necha piksel siljish (offset) olinishini belgilaydi | Sinab ko‘ring |
Scrollspy metodlari
Quyidagi jadvalda barcha mavjud scrollspy metodlari keltirilgan.
| Metod | Tavsif |
|---|---|
| .scrollspy("refresh") | Scrollspy’ga elementlar qo‘shilganda yoki undan olib tashlanganda hujjatni yangilash uchun ushbu metoddan foydalanish mumkin |
| .scrollspy("dispose") | Scrollspy’ni yo‘q qiladi |
Scrollspy hodisalari (events)
Quyidagi jadvalda barcha mavjud scrollspy hodisalari keltirilgan.
| Hodisa | Tavsif |
|---|---|
| activate.bs.scrollspy | Scrollspy tomonidan yangi element faollashtirilganda yuz beradi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!