прокрутка

Автоматически обновляйте компоненты навигации или группы списка 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)

получить экземпляр

Статический метод, который позволяет вам получить экземпляр 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`	Это событие срабатывает на элементе прокрутки всякий раз, когда новый элемент активируется scrollspy.

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

прокрутка

Как это работает

Прокручиваемые контейнеры и доступ с клавиатуры

Пример в навигационной панели

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

Второй заголовок

Третий заголовок

Четвертый заголовок

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

Пример с вложенной навигацией

Пункт 1

Пункт 1-1

Пункт 1-2

Пункт 2

Пункт 3

Пункт 3-1

Пункт 3-2

Пример со списком-группой

Пункт 1

Пункт 2

Пункт 3

Пункт 4

Применение

Через атрибуты данных

Через JavaScript

Требуются разрешимые цели ID

Невидимые целевые элементы игнорируются

Методы

обновить

распоряжаться

получить экземпляр

getOrCreateInstance

Опции

События