Scrollspy

Жүктөөчү навигацияны автоматтык түрдө жаңыртыңыз же сыдырма позициясына негизделген топтун компоненттерин тизмектеп, учурда көрүү терезесинде кайсы шилтеме активдүү экенин көрсөтүңүз.

Бул бетте

Бул кантип иштейт

Scrollspy .activeанкердик ( <a>) элементтериндеги классты которуштурууда, анкердин idшилтемеси бар элемент hrefкөрүнүшкө сыдырылып келгенде. Scrollspy Bootstrap nav компоненти же тизме тобу менен бирге эң жакшы колдонулат , бирок ал учурдагы беттеги каалаган анкер элементтери менен да иштейт. Бул жерде кантип иштейт.

Баштоо үчүн, scrollspy эки нерсени талап кылат: навигация, тизме тобу же шилтемелердин жөнөкөй топтому, плюс жылдырылуучу контейнер. Жылдырылуучу контейнер жана <body>топтому бар ыңгайлаштырылган элемент болушу мүмкүн .heightoverflow-y: scroll
Жылдырылуучу контейнерге кошулган навигациянын уникалдуу жерин data-bs-spy="scroll"кошуңуз . Клавиатурага кирүү мүмкүнчүлүгүн камсыз кылуу үчүн да камтууну унутпаңыз .data-bs-target="#navId"navIdidtabindex="0"
Сиз "шпиондук" контейнерди жылдырганыңызда, .activeкласс кошулуп, байланышкан навигациядагы анкердик шилтемелерден алынып салынат. Шилтемелерде чечилүүчү idмаксаттар болушу керек, антпесе алар этибарга алынбайт. Мисалы, <a href="#home">home</a>DOMдагы бир нерсеге дал келиши керек<div id="home"></div>
Көрүнбөгөн максаттуу элементтер этибарга алынбайт. Төмөнкү көрүнбөгөн элементтер бөлүмүн караңыз.

Мисалдар

Чабыт тилкесинин астындагы аймакты сыдырып, класстын активдүү өзгөрүшүн көрүңүз. Ашылма менюну ачып, ачылуучу элементтердин да баса белгиленип жатканын көрүңүз.

Биринчи рубрика

Бул scrollspy барагынын айрым толтургуч мазмуну. Сиз баракты ылдый жылдырып жатканда, тиешелүү навигация шилтемеси баса белгиленип турганын белгилеңиз. Бул компоненттин мисалында кайталанат. Сыдырууну жана бөлүп көрсөтүүнү баса белгилөө үчүн биз бул жерге дагы бир нече мисал көчүрмөсүн кошуп жатабыз.

Экинчи рубрика

Үчүнчү рубрика

Төртүнчү рубрика

Бешинчи рубрика

<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>

Кыстарылган навигация

Scrollspy ошондой эле уячалар менен иштейт .nav. Эгерде уя .navболсо .active, анын ата-энеси да болот .active. Navbar жанындагы аймакты сыдырып, класстын активдүү өзгөрүшүн көрүңүз.

1-пункт

JavaScript плагини көрүнгөн нерселердин ичинен туура элементти тандоого аракет кылаарын унутпаңыз. Бир эле учурда бир нече көрүнгөн скллспю максаттары кээ бир көйгөйлөрдү жаратышы мүмкүн.

1-1-пункт

1-2-пункт

2-пункт

3-пункт

3-1-пункт

3-2-пункт

<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>

Тизме тобу

Scrollspy да .list-groups менен иштейт. Тизме тобунун жанындагы аймакты жылдырып, класстын активдүү өзгөрүшүн көрүңүз.

1-пункт 2-пункт 3-пункт 4-пункт

1-пункт

2-пункт

3-пункт

4-пункт

<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>

Жөнөкөй анкерлер

Scrollspy навигация компоненттери жана тизме топтору менен эле чектелбейт, андыктан ал <a>учурдагы документтеги каалаган анкер элементтеринде иштейт. Аймакты жылдырып, .activeкласстын өзгөрүшүн көрүңүз.

1-пункт 2-пункт 3-пункт 4-пункт 5-пункт

1-пункт

2-пункт

3-пункт

4-пункт

5-пункт

<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>

Көрүнбөгөн элементтер

Көрүнбөгөн максаттуу элементтер этибарга алынбайт жана алардын тиешелүү навигация элементтери .activeклассты албайт. Көрүнбөгөн орогучта инициализацияланган Scrollspy инстанциялары бардык максаттуу элементтерди этибарга албайт. refreshОроо көрүнгөндөн кийин байкала турган элементтерди текшерүү ыкмасын колдонуңуз .

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()
  })
})

Колдонуу

Маалымат атрибуттары аркылуу

Үстүнкү тилкеңиздин навигацияңызга scrollspy жүрүм-турумун оңой кошуу үчүн data-bs-spy="scroll", шпион кылгыңыз келген элементке кошуңуз (көбүнчө бул <body>). Андан кийин кандайдыр бир Bootstrap компонентинин ата-энелик элементинин классынын аты data-bs-targetменен атрибутту кошуңуз.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 аркылуу

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

Параметрлер

Опциялар берилиш атрибуттары же JavaScript аркылуу өтүшү мүмкүн болгондуктан, сиз дарегинде болгондой, параметр атын кошо data-bs-аласыз data-bs-animation="{value}". Опциянын аталышынын регистр түрүн “ camelCase ”ден “ кебаб- кепке” өзгөртүүнү унутпаңызОпцияларды маалымат атрибуттары аркылуу өткөрүп жаткандаМисалы, data-bs-custom-class="beautifier"ордуна колдонуңуз data-bs-customClass="beautifier".

Bootstrap 5.2.0 версиясында, бардык компоненттер JSON сап катары жөнөкөй компонент конфигурациясын камтый турган эксперименталдык сакталган маалымат атрибутун колдойт. data-bs-configЭлементте data-bs-config='{"delay":0, "title":123}'жана data-bs-title="456"атрибуттары болгондо, акыркы titleмаани болот 456жана өзүнчө маалымат атрибуттары берилген маанилерди жокко чыгарат data-bs-config. Мындан тышкары, учурдагы маалымат атрибуттары сыяктуу JSON маанилерин жайгаштыра алат data-bs-delay='{"show":0,"hide":150}'.

аты	Type	Демейки	Description
`rootMargin`	сап	`0px 0px -25%`	Сыдыруу абалын эсептөөдө Intersection Observer rootMargin жарактуу бирдиктери.
`smoothScroll`	логикалык	`false`	Колдонуучу ScrollSpy байкалуучу шилтемени чыкылдатканда жылмакай сыдырууну иштетет.
`target`	сап, DOM элементи	`null`	Scrollspy плагинди колдонуу үчүн элементти белгилейт.
`threshold`	массив	`[0.1, 0.5, 1]`	`IntersectionObserver` жылдыруу абалын эсептөөдө босого жарактуу киргизүү.

Эскирген параметрлер

v5.1.3 чейин биз offset& methodопцияларын колдонуп келгенбиз, алар азыр эскирип, ордуна rootMargin. offsetАртка шайкештикти сактоо үчүн, биз берилгенди талдоону улантабыз , бирок бул функция v6rootMargin ичинде өчүрүлөт .

Методдор

Метод	Description
`dispose`	Элементтин жылдыргычын жок кылат. (DOM элементинде сакталган маалыматтарды жок кылат)
`getInstance`	DOM элементи менен байланышкан scrollspy инстанциясын алуу үчүн статикалык ыкма.
`getOrCreateInstance`	DOM элементи менен байланышкан scrollspy инстанциясын алуу же ал инициализацияланбаган учурда жаңысын түзүү үчүн статикалык ыкма.
`refresh`	DOMга элементтерди кошкондо же алып салганда, сиз жаңылоо ыкмасын чакырышыңыз керек болот.

Бул жерде жаңылоо ыкмасын колдонуунун мисалы:

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

Окуялар

Окуя	Description
`activate.bs.scrollspy`	Бул окуя scrollspy аркылуу казык иштетилген сайын сыдырма элементте күйөт.

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