Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

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 kerak id.

Muvaffaqiyatli amalga oshirilgandan so'ng, navbat yoki ro'yxat guruhingiz mos ravishda yangilanadi .activeva 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 heightto'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 namuna 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 namuna 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 namuna 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 namuna 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 namuna 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 .navs bilan ishlaydi. Agar uyali .navbo'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 namuna 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 namuna 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 namuna 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 namuna 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 namuna 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 namuna 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 namuna 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-groups 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 namuna 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 namuna 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 namuna 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 namuna 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-targetasosiy 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 offsetuchun usuldan foydalanadi . aylantirish koordinatalarini olish uchun va xususiyatlaridan foydalanadi .Element.getBoundingClientRect()positionHTMLElement.offsetTopHTMLElement.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...
})