Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

Отслеживание прокрутки

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

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

У отслеживания прокрутки есть несколько требований для правильной работы:

  • Он должен использоваться в Bootstrap компонент навигации или группа списка.
  • Отслеживание прокрутки требует position: relative; на элементе, за которым Вы шпионите, обычно это <body>.
  • Якоря (<a>) обязательны и должны указывать на элемент с этим id.

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

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

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

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

Прокрутите область под панелью навигации и посмотрите, как меняется активный класс. Выпадающие элементы также будут выделены.

@fat

Контент-заполнитель для примера scrollspy. У Вас лучшая архитектура. Марки в паспорте, она космополитична. Прекрасно, свежо, яростно, у нас все на замке. Никогда не планировал, что однажды потеряю тебя. Она съедает твое сердце. Ваш поцелуй космический, каждое движение волшебно. Я имею в виду тех, я имею в виду, как будто она одна. Приветствую близких, давайте отправимся в путешествие. Просто наслаждайся ночью, как 4 июля! Но Вы бы предпочли зря.

@mdo

Контент-заполнитель для примера scrollspy. Потому что она муза и художник. (Вот как мы это делаем) Итак, Вы хотите поиграть с магией. Так что будь уверен, прежде чем отдать мне все. Я иду, я иду по воздуху (сегодня вечером). Пропусти разговор, все слышал, пора прогуляться.

один

Контент-заполнитель для примера scrollspy. Уносит тебя на много миль, так высоко, потому что у нее такая интернациональная улыбка. В моей постели незнакомец, в голове стучит. О нет. В другой жизни я бы заставил тебя остаться. «Потому что я, я способен на все. Костюм для моей коронной битвы. Воровал у родителей спиртное и забирался на крышу. Тон, загар подходит и готов, включите его, потому что он становится тяжелым. Ее любовь подобна наркотику. Думаю, я забыл, что у меня был выбор.

два

Контент-заполнитель для примера scrollspy. Пришло время вывести большие воздушные шары. Я иду, я иду по воздуху (сегодня вечером). Ага, мы максимально использовали кредитные карты и нас выгнали из бара. Эй, кричите всем вам, дети, покупайте бутылку на свои деньги за аренду. Я заставляю твое сердце биться быстрее в моих обтягивающих джинсах. Если будет возможность, лучше оставь ее себе. Эй, кричите всем вам, дети, покупайте бутылку на свои деньги за аренду.

три

Контент-заполнитель для примера scrollspy. Если ты хочешь танцевать, если ты хочешь всего этого, ты знаешь, что я девушка, которой тебе следует позвонить. Я бы прошел сквозь шторм. Так что позволь мне надеть твой костюм на день рождения. Тот, который ускользнул. В прошлую пятницу вечером, да, я думаю, мы нарушили закон, всегда говорим, что остановимся. Потому что она немного от Йоко, и она немного от «О нет». Я хочу, чтобы челюсть отвисла, глаза выскочили, голова кружилась, тело шокировало. Ага, мы максимально использовали кредитные карты и нас выгнали из бара.

И еще несколько заполнителей, на всякий случай.

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Панель навигации</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Выпадающий список</a>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#one">один</a></li>
        <li><a class="dropdown-item" href="#two">два</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#three">три</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">один</h4>
  <p>...</p>
  <h4 id="two">два</h4>
  <p>...</p>
  <h4 id="three">три</h4>
  <p>...</p>
</div>

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

Отслеживание прокрутки также работает с вложенными .nav. Если вложенный .nav имеет значение .active, его родители также будут .active. Прокрутите область рядом с панелью навигации и посмотрите, как меняется активный класс.

Элемент 1

Контент-заполнитель для примера scrollspy. Этот относится к пункту 1. Возносит вас на много миль, так высоко, потому что у нее такая интернациональная улыбка. В моей постели незнакомец, в голове стучит. О нет. В другой жизни я бы заставил тебя остаться. «Потому что я, я способен на все. Костюм для моей коронной битвы. Воровал у родителей спиртное и забирался на крышу. Тон, загар подходит и готов, включите его, потому что он становится тяжелым. Ее любовь подобна наркотику. Думаю, я забыл, что у меня есть выбор.

Элемент 1-1

Контент-заполнитель для примера scrollspy. Это относится к пункту 1-1. У вас лучшая архитектура. Марки в паспорте, она космополитична. Прекрасно, свежо, яростно, у нас все на замке. Никогда не планировал, что однажды потеряю тебя. Она съедает твое сердце. Ваш поцелуй космический, каждое движение волшебно. Я имею в виду тех, я имею в виду, как будто она одна. Приветствую близких, давайте отправимся в путешествие. Просто наслаждайся ночью, как 4 июля! Но вы бы предпочли зря.

Элемент 1-2

Контент-заполнитель для примера scrollspy. Это относится к пункту 1-2. Ее любовь подобна наркотику. Все мои девочки винтажные Chanel baby. Получил мотель и построил форт из листов. Потому что она муза и художник. (Вот как мы это делаем) Итак, вы хотите поиграть с магией. Так что будь уверен, прежде чем отдать мне все. Я иду, я иду по воздуху (сегодня вечером). Пропусти разговор, все слышал, пора прогуляться. Поймай ее, если сможешь. Жалящая, как пчела, я заработал свои полосы.

Элемент 2

Контент-заполнитель для примера scrollspy. Это относится к пункту 2. Не нужно извинений. Сейчас нет страха, отпусти и просто будь свободным, я буду любить тебя безоговорочно. В прошлую пятницу вечером. Не будь застенчивым парнем, держу пари, это красиво. Летом после школы, когда мы впервые встретились. Потому что она муза и художник. Какая? Подождите. Нет нет Нет Нет. Думал, что я был исключением.

Элемент 3

Контент-заполнитель для примера scrollspy. Это относится к пункту 3. Слухи на улице, тебе есть что мне показать, мне. За все эти деньги мне не купить машину времени. Сделайте это как свой день рождения каждый день. Итак, мы вышли на бульвар. Ты заставляешь меня чувствовать, что я живу подростковой мечтой, как ты меня заводишь Пропустить разговор, все это слышал, пора прогуляться. Слухи на улице, тебе есть что показать мне, мне. В этом нет ничего страшного, ничего страшного, ничего страшного.

Элемент 3-1

Контент-заполнитель для примера scrollspy. Это относится к пункту 3-1. Детка, ты посмел сделать это? В этом нет ничего страшного. Да, тебе повезло, если ты летишь на ее самолете. Просто наслаждайся ночью, как 4 июля! Стоять на передовой, когда начинают падать бомбы. Так что будь уверен, прежде чем отдать мне все.

Элемент 3-2

Контент-заполнитель для примера scrollspy. Это относится к пункту 3-2. Ты оригинальный, не подлежит замене. Всю ночь они играют, твоя песня. Калифорнийские девушки, мы неоспоримы. Как птица без клетки. Сейчас нет страха, отпусти и просто будь свободным, я буду любить тебя безоговорочно. Я вижу надпись на стене. Вы можете путешествовать по миру, но ничто не приближается к золотому берегу.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Панель навигации</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Элемент 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-1-1">Элемент 1-1</a>
      <a class="nav-link ms-3 my-1" href="#item-1-2">Элемент 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Элемент 2</a>
    <a class="nav-link" href="#item-3">Элемент 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-3-1">Элемент 3-1</a>
      <a class="nav-link ms-3 my-1" href="#item-3-2">Элемент 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">Элемент 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Элемент 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Элемент 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Элемент 2</h4>
  <p>...</p>
  <h4 id="item-3">Элемент 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Элемент 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Элемент 3-2</h5>
  <p>...</p>
</div>

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

Отслеживание прокрутки также работает с .list-group. Прокрутите область рядом с группой списка и посмотрите, как меняется активный класс.

Элемент 1

Контент-заполнитель для примера группы списков scrollspy. Это относится к пункту 1. Не нужно извиняться. Сейчас нет страха, отпусти и просто будь свободным, я буду любить тебя безоговорочно. В прошлую пятницу вечером. Не будь застенчивым парнем, держу пари, это красиво. Летом после школы, когда мы впервые встретились. Потому что она муза и художник. Какая? Подождите. Думал, что я был исключением.

Элемент 2

Контент-заполнитель для примера группы списков scrollspy. Этот относится к пункту 2. Да, она танцует под свой ритм. О нет. Ты мог бы быть лучшим. Потому что, детка, ты фейерверк. Может быть причина, по которой все двери закрыты. Откройте свое сердце и просто позвольте ему начаться. Так шикарно, да, она классика.

Элемент 3

Контент-заполнитель для примера группы списков scrollspy. Это относится к пункту 3. Мы идем все выше и выше. Никогда друг без друга мы заключили пакт. Я хожу по воздуху. Кто-то сказал, что тебе удалили татуировку. Теперь я плыву как бабочка. Тон, загар подходит и готов, включите его, потому что он становится тяжелым. Потому что однажды ты мой, когда ты мой. Вы просто должны зажечь свет и позволить ему сиять! Итак, мы вышли на бульвар. Вы когда-нибудь чувствовали себя такими тонкими, как бумага. Я все это вижу, я вижу это сейчас.

Элемент 4

Контент-заполнитель для примера группы списков scrollspy. Это относится к пункту 4. Летом после школы, когда мы впервые встретились. Сейчас нет страха, отпусти и просто будь свободным, я буду любить тебя безоговорочно. Поцелованная солнцем кожа такая горячая, что мы растопим твое эскимо. Эта любовь заставит вас взлететь.

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Элемент 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Элемент 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Элемент 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Элемент 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">Элемент 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Элемент 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Элемент 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Элемент 4</h4>
  <p>...</p>
</div>

Использование

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

Чтобы легко добавить поведение прокрутки к Вашей навигации на верхней панели, добавьте data-bs-spy="scroll" к элементу, за которым Вы хотите следить (чаще всего это <body>). Затем добавьте атрибут data-bs-target с идентификатором или классом родительского элемента любого компонента Bootstrap .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

После добавления position: relative; в Ваш CSS вызовите scrollspy через JavaScript:

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

Требуются разрешаемые цели Идентификатора

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

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

Целевые элементы, которые не видны, будут игнорироваться, а соответствующие им элементы навигации никогда не будут выделены.

Методы

refresh

При использовании отслеживания прокрутки в сочетании с добавлением или удалением элементов из DOM Вам необходимо вызвать метод обновления следующим образом:

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

dispose

Уничтожает отслеживание прокрутки элемента. (Удаляет сохраненные данные в элементе DOM)

getInstance

Статический метод, позволяющий получить экземпляр отслеживание прокрутки, связанный с элементом DOM.

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

Параметры

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

Наименование Тип По умочланию Описание
offset number 10 Пиксели для смещения сверху при вычислении положения прокрутки.
method string auto Находит, в каком разделе находится отслеживаемый элемент. auto выберет лучший метод для получения координат прокрутки. offset будет использовать Element.getBoundingClientRect() для получения координат прокрутки. position будет использовать HTMLElement.offsetTop and HTMLElement.offsetLeft свойства для получения координат прокрутки.
target string | jQuery object | DOM element Определяет элемент для применения подключаемого модуля Отслеживания прокрутки.

События

Тип события Описание
activate.bs.scrollspy Это событие запускается в элементе прокрутки всякий раз, когда новый элемент активируется отслеживанием прокрутки.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // сделайте что-нибудь...
})