Scrollspy

Bootstrap navigatsiyasini avtomatik ravishda yangilang yoki ko'rish oynasida qaysi havola faol ekanligini ko'rsatish uchun aylantirish holatiga qarab guruh komponentlarini ro'yxatlang.

Ushbu sahifada

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"

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

Uchinchi sarlavha

To'rtinchi sarlavha

Beshinchi sarlavha

<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

1-1-band

1-2-band

2-modda

3-modda

3-1-band

3-2-band

<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 2-modda 3-modda 4-modda

1-modda

2-modda

3-modda

4-modda

<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 `offset`uchun 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...
})

Scrollspy

U qanday ishlaydi

Qaytib olinadigan konteynerlar va klaviaturadan foydalanish

Navbardagi misol

Birinchi sarlavha

Ikkinchi sarlavha

Uchinchi sarlavha

To'rtinchi sarlavha

Beshinchi sarlavha

Ichki nav bilan misol

1-modda

1-1-band

1-2-band

2-modda

3-modda

3-1-band

3-2-band

Ro'yxat-guruh bilan misol

1-modda

2-modda

3-modda

4-modda

Foydalanish

Ma'lumotlar atributlari orqali

JavaScript orqali

Yechish mumkin bo'lgan ID maqsadlari talab qilinadi

Koʻrinmaydigan maqsadli elementlar eʼtiborga olinmadi

Usullari

yangilash

tasarruf qilish

getInstance

getOrCreateInstance

Variantlar

Voqealar