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

Anchor tomonidan havola qilingan element ko'rinishga aylantirilganda Scrollspy .activelangar ( ) elementlaridagi sinfni almashtiradi. Scrollspy eng yaxshi Bootstrap nav komponenti yoki ro'yxat guruhi bilan birgalikda ishlatiladi , lekin u joriy sahifadagi har qanday langar elementlari bilan ham ishlaydi. Bu qanday ishlaydi.<a>idhref

Boshlash uchun scrollspy ikkita narsani talab qiladi: navigatsiya, ro'yxatlar guruhi yoki oddiy havolalar to'plami, shuningdek aylantiriladigan konteyner. Qaytib olinadigan konteyner va <body>to'plamli maxsus element yoki bo'lishi mumkin .heightoverflow-y: scroll
Qaytib olinadigan konteynerga qo'shing data-bs-spy="scroll"va data-bs-target="#navId"qayerda bog'langan navigatsiyaning navIdnoyobligi . Klaviaturadan foydalanishni ta'minlash uchun ida qo'shganingizga ishonch hosil qiling .tabindex="0"
“Jsuslangan” konteynerni aylanayotganingizda .activesinf qo‘shiladi va tegishli navigatsiya ichidagi langar havolalaridan o‘chiriladi. Havolalar hal qilinadigan idmaqsadlarga ega bo'lishi kerak, aks holda ular e'tiborga olinmaydi. Masalan, <a href="#home">home</a>DOMdagi biror narsaga mos kelishi kerak<div id="home"></div>
Ko'rinmaydigan maqsadli elementlar e'tiborga olinmaydi. Quyidagi " Ko'rinmaydigan elementlar " bo'limiga qarang.

Misollar

Navbar ostidagi maydonni aylantiring va faol sinf o'zgarishini kuzating. Ochiladigan menyuni oching va ochiladigan elementlarning ta'kidlanishini ham tomosha qiling.

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 bg-light px-3 mb-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-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" 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

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

Shuni yodda tutingki, JavaScript plagini ko'rinadigan barcha elementlar orasidan to'g'ri elementni tanlashga harakat qiladi. Bir vaqtning o'zida bir nechta ko'rinadigan scrollspy maqsadlari ba'zi muammolarni keltirib chiqarishi mumkin.

1-1-band

1-2-band

2-modda

3-modda

3-1-band

3-2-band

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <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>

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Ro'yxat guruhi

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 class="row">
  <div class="col-4">
    <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>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" 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>
  </div>
</div>

Oddiy langarlar

Scrollspy faqat nav komponentlari va ro'yxat guruhlari bilan cheklanmaydi, shuning uchun u <a>joriy hujjatdagi har qanday langar elementlarida ishlaydi. Hududni aylantiring va .activesinf o'zgarishini tomosha qiling.

1-modda 2-modda 3-modda 4-modda 5-modda

1-modda

2-modda

3-modda

4-modda

5-modda

<div class="row">
  <div class="col-4">
    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="simple-list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="simple-list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="simple-list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="simple-list-item-4">Item 4</h4>
      <p>...</p>
      <h4 id="simple-list-item-5">Item 5</h4>
      <p>...</p>
    </div>
  </div>
</div>

Ko'rinmaydigan elementlar

Ko‘rinmaydigan maqsadli elementlar e’tiborga olinmaydi va ularning mos navbatma-navbat elementlari .activesinfga ega bo‘lmaydi. Ko'rinmaydigan o'ramda ishga tushirilgan Scrollspy nusxalari barcha maqsadli elementlarni e'tiborsiz qoldiradi. refreshO'ram ko'rinadigan bo'lsa, kuzatiladigan elementlarni tekshirish uchun usuldan foydalaning .

document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
  el.addEventListener('shown.bs.tab', () => {
    const target = el.getAttribute('data-bs-target')
    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
  })
})

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 asosiy elementi yoki sinf nomi data-bs-targetbilan atributni qo'shing.id.nav

<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

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Variantlar

data-bs-Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkinligi sababli , ga variant nomini qo'shishingiz mumkin data-bs-animation="{value}". Variantlarni maʼlumotlar atributlari orqali oʻtkazishda variant nomining registr turini “ camelCase ” dan “ kabob-case ” ga oʻzgartirganingizga ishonch hosil qiling. Masalan, data-bs-custom-class="beautifier"o'rniga foydalaning data-bs-customClass="beautifier".

Bootstrap 5.2.0 dan boshlab barcha komponentlar JSON qatori sifatida oddiy komponent konfiguratsiyasini joylashtirishi mumkin bo'lgan eksperimental zahiradagi ma'lumotlar atributini qo'llab-quvvatlaydi. data-bs-configElement data-bs-config='{"delay":0, "title":123}'va data-bs-title="456"atributlariga ega bo'lsa, yakuniy titleqiymat bo'ladi 456va alohida ma'lumotlar atributlari ga berilgan qiymatlarni bekor qiladi data-bs-config. Bundan tashqari, mavjud ma'lumotlar atributlari kabi JSON qiymatlarini joylashtirishi mumkin data-bs-delay='{"show":0,"hide":150}'.

Ism	Turi	Standart	Tavsif
`rootMargin`	ip	`0px 0px -25%`	O'tish joyini hisoblashda kesishuv kuzatuvchisi rootMargin joriy birliklar.
`smoothScroll`	mantiqiy	`false`	Foydalanuvchi ScrollSpy kuzatilishi mumkin bo'lgan havolani bosganida silliq aylantirishni yoqadi.
`target`	string, DOM elementi	`null`	Scrollspy plaginini qo'llash uchun elementni belgilaydi.
`threshold`	massiv	`[0.1, 0.5, 1]`	`IntersectionObserver` o'tish joyini hisoblashda to'g'ri kirish chegarasi .

Eskirgan variantlar

5.1.3 ga qadar biz offset& methodopsiyalaridan foydalanardik, ular endi eskirgan va oʻrniga rootMargin. offsetOrqaga qarab muvofiqlikni saqlab qolish uchun biz berilgan maʼlumotni tahlil qilishni davom ettiramiz , lekin bu xususiyat v6rootMargin da oʻchirib tashlanadi .

Usullari

Usul	Tavsif
`dispose`	Elementning scrollspy-ni yo'q qiladi. (DOM elementida saqlangan ma'lumotlarni o'chiradi)
`getInstance`	DOM elementi bilan bog'langan scrollspy misolini olish uchun statik usul.
`getOrCreateInstance`	DOM elementi bilan bog'langan scrollspy nusxasini olish yoki agar u ishga tushirilmagan bo'lsa, yangisini yaratish uchun statik usul.
`refresh`	DOM-ga elementlarni qo'shish yoki o'chirishda siz yangilash usulini chaqirishingiz kerak bo'ladi.

Yangilash usulidan foydalanishga misol:

const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
  bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})

Voqealar

Tadbir	Tavsif
`activate.bs.scrollspy`	Bu hodisa scrollspy tomonidan langar faollashtirilganda aylantirish elementida yonadi.

const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
  // do something...
})