in English

Scrollspy

Аўтаматычнае абнаўленне навігацыі Bootstrap або кампанентаў групы спісаў на аснове пазіцыі пракруткі, каб паказаць, якая спасылка зараз актыўная ў акне прагляду.

На гэтай старонцы

Як гэта працуе

Scrollspy прад'яўляе некалькі патрабаванняў для нармальнай працы:

Ён павінен выкарыстоўвацца ў навігацыйным кампаненце Bootstrap або групе спісаў .
Scrollspy патрабуе position: relative;элемента, за якім вы шпіёніце, звычайна <body>.
Якары ( <a>) абавязковыя і павінны паказваць на элемент з гэтым id.

Пры паспяховым укараненні ваша навігацыйная сістэма або група спісаў будуць адпаведна абнаўляцца, перамяшчаючы .activeклас ад аднаго элемента да наступнага на аснове звязаных з імі мэтаў.

Кантэйнеры з магчымасцю пракруткі і доступ з клавіятуры

Калі вы ствараеце кантэйнер з магчымасцю пракручвання (акрамя <body>), не забудзьцеся мець heightнабор і overflow-y: scroll;прымяніць да яго — побач з a tabindex="0", каб забяспечыць доступ з клавіятуры.

Пракруціце вобласць пад панэллю навігацыі і паглядзіце, як змяняецца актыўны клас. Выпадальныя элементы таксама будуць вылучаны.

Першы загаловак

Гэта некаторы змест запаўняльніка для старонкі Scrollspy. Звярніце ўвагу, што калі вы пракручваеце старонку ўніз, адпаведная навігацыйная спасылка вылучаецца. Гэта паўтараецца ва ўсім прыкладзе кампанента. Мы працягваем дадаваць сюды яшчэ некалькі прыкладаў, каб падкрэсліць пракрутку і вылучэнне.

Другі загаловак

Трэці загаловак

Чацвёрты загаловак

Пяты загаловак

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

Прыклад з укладзеным нав

Scrollspy таксама працуе з укладзенымі .navs. Калі ёсць укладзены .nav, .activeяго бацькі таксама будуць .active. Пракруціце вобласць побач з панэллю навігацыі і паглядзіце, як змяняецца актыўны клас.

Пункт 1

Пункт 1-1

Пункт 1-2

Пункт 2

Пункт 3

Пункт 3-1

Пункт 3-2

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

Прыклад са спісам-групай

Scrollspy таксама працуе з .list-groups. Пракруціце вобласць побач са спісам групы і паглядзіце, як змяняецца актыўны клас.

Пункт 1 Пункт 2 Пункт 3 Пункт 4

Пункт 1

Пункт 2

Пункт 3

Пункт 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 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>

Выкарыстанне

Праз атрыбуты дадзеных

Каб лёгка дадаць шпіёнскія паводзіны пракруткі ў верхнюю панэль навігацыі, дадайце data-bs-spy="scroll"элемент, за якім вы хочаце сачыць (часцей за ўсё гэта будзе <body>). Затым дадайце data-bs-targetатрыбут з ідэнтыфікатарам або класам бацькоўскага элемента любога .navкампанента Bootstrap.

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

Пасля дадання position: relative;вашага CSS выклічце scrollspy праз JavaScript:

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

Патрабуюцца вырашальныя мэты ID

Спасылкі на панэлі навігацыі павінны мець дазвольныя ідэнтыфікатары. Напрыклад, <a href="#home">home</a>павінен адпавядаць чаму-небудзь у DOM, напрыклад <div id="home"></div>.

Нябачныя мэтавыя элементы ігнаруюцца

Мэтавыя элементы, якія не бачныя, будуць ігнаравацца, а адпаведныя элементы навігацыі ніколі не будуць вылучаны.

Метады

абнавіць

Пры выкарыстанні scrollspy у спалучэнні з даданнем або выдаленнем элементаў з DOM вам трэба будзе выклікаць метад абнаўлення так:

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

распараджацца

Знішчае scrollspy элемента. (Выдаляе захаваныя даныя ў элеменце DOM)

getInstance

Статычны метад, які дазваляе атрымаць асобнік Scrollspy, звязаны з элементам DOM

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

Статычны метад, які дазваляе вам атрымаць асобнік Scrollspy, звязаны з элементам DOM, або стварыць новы, калі ён не быў ініцыялізаваны

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Параметры

Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-bs-, як у data-bs-offset="".

Імя	Тып	Па змаўчанні	Апісанне
`offset`	лік	`10`	Пікселі для зрушэння ад верху пры разліку пазіцыі пракруткі.
`method`	радок	`auto`	Знаходзіць, у якім раздзеле знаходзіцца падгледжаны элемент. `auto`Выбірае найлепшы спосаб атрымання каардынатаў пракруткі. `offset`будзе выкарыстоўваць `Element.getBoundingClientRect()`метад, каб атрымаць каардынаты пракруткі. `position`будзе выкарыстоўваць уласцівасці `HTMLElement.offsetTop`і для атрымання каардынатаў пракруткі.`HTMLElement.offsetLeft`
`target`	радок \| Аб'ект jQuery \| Элемент DOM		Вызначае элемент для прымянення плагіна Scrollspy.

Падзеі

Тып падзеі	Апісанне
`activate.bs.scrollspy`	Гэта падзея запускаецца на элеменце пракруткі кожны раз, калі новы элемент актывуецца шпіёнам пракруткі.

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

Scrollspy

Як гэта працуе

Кантэйнеры з магчымасцю пракруткі і доступ з клавіятуры

Прыклад у панэлі навігацыі

Першы загаловак

Другі загаловак

Трэці загаловак

Чацвёрты загаловак

Пяты загаловак

Прыклад з укладзеным нав

Пункт 1

Пункт 1-1

Пункт 1-2

Пункт 2

Пункт 3

Пункт 3-1

Пункт 3-2

Прыклад са спісам-групай

Пункт 1

Пункт 2

Пункт 3

Пункт 4

Выкарыстанне

Праз атрыбуты дадзеных

Праз JavaScript

Патрабуюцца вырашальныя мэты ID

Нябачныя мэтавыя элементы ігнаруюцца

Метады

абнавіць

распараджацца

getInstance

getOrCreateInstance

Параметры

Падзеі