У меня есть приложение, которое было построено с использованием Bootstrap 4. Я пытаюсь включить в него Scrollspy (https://getbootstrap.com/docs/4.0/components/scrollspy/).
Я получал некоторые странные результаты, поэтому Естественно предполагалось, что это может быть связано с некоторыми из существующих HTML / CSS в приложении.
Поскольку я не смог найти причину, я создал пустую веб-страницу, используя файлы Bootstrap из их CDN и ни один из них. моего собственного CSS. Это здесь: https://www.codeply.com/p/RFHXIe3E9o
Разметка для этого очень основа c. Он имеет 5 <h4>, каждый из которых имеет идентификаторы #list-item-1 ... #list-item-5 с блоками текста lorem внизу.
Компонент <nav> взят из документов Bootstrap , Каждый якорь в этом навигационном меню связан с одним из указанных выше идентификаторов, например,
<a class="nav-link" href="#list-item-3">item 3</a>
Насколько я понимаю, после нажатия этой кнопки должно произойти следующее : :
- «элементу 3» в
<nav> должен быть присвоен класс .active (фон выделен синим цветом с белым текстом). - Браузер должен прокрутить вниз до «Элемента 3» внутри
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
В коде у меня нет ни одного из перечисленных выше случаев. Вместо этого:
- "элемент 4" всегда равен
.active независимо от того, что было нажано в <nav>. Это включает в себя начальную загрузку страницы, где активен «элемент 4.» - Страница прокручивается, но «Элемент 3»
<h4> не отображается в области просмотра. Это касается любого другого предмета.
Пожалуйста, кто-нибудь может помочь диагностировать эту проблему?
Я мог понять, почему это может происходить в приложении с существующим HTML / CSS, но не тогда, когда он возвращается к пустому шаблону с разметкой, скопированной из документов Bootstrap.
Метод, который я использую для инициализации Scrollspy, использует data атрибуты, как описано здесь: https://getbootstrap.com/docs/4.0/components/scrollspy/#via -data-attribute . В приведенном выше коде идентификатор #list-example относится к <nav> и data-target, что я считаю правильным.
Протестировано в Chrome v80, но также выглядит так же в Safari.