Есть ли способ заставить scrollspy работать БЕЗ , используя nav или list-group?
Документация по начальной загрузке для состояний scrollspy, что она может использоваться только на nav или list group комплектующих. ДОКУМЕНТАЦИЯ
Как это работает
Scrollspy имеет несколько требований для правильной работы:
- Если вы создаете наш JavaScriptиз источника, он требует util.js.
- Он должен использоваться для навигационного компонента или группы списков Bootstrap.
- Для Scrollspy требуется
position: relative; для элемента, на который вы шпионите, обычно это<body>. - При слежке за элементами, отличными от
<body>, обязательно установите height и примените overflow-y: scroll;. - Требуются анкеры (
<a>)и должен указывать на элемент с таким идентификатором.
Этот вопрос аналогичен, но для Bootstrap 3 (не 4) и ответом является добавлениеrole="tablist".Ну, это не работает здесь.Есть много вопросов на SO о scrollspy, но в основном это касается Bootstrap 3.
CODE:
/*DEMO*/
nav{top:50%;left:1.5rem;transform:translateY(-50%)}
nav a{display:block;width:20px;height:20px;margin-bottom:.5rem}
/*COLORS*/
nav a{background:black}
nav a.active{background:red}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body data-spy="scroll" data-target="#nav" data-offset="0">
<section class="container-fluid">
<div class="row">
<div id="item-1" class="col-12 vh-100 bg-primary"></div>
<div id="item-2" class="col-12 vh-100 bg-warning"></div>
<div id="item-3" class="col-12 vh-100 bg-danger"></div>
<div id="item-4" class="col-12 vh-100 bg-success"></div>
<div id="item-5" class="col-12 vh-100 bg-info"></div>
</div>
</section>
<nav id="nav" class="d-flex flex-column position-fixed">
<a href="#item-1"></a>
<a href="#item-2"></a>
<a href="#item-3"></a>
<a href="#item-4"></a>
<a href="#item-5"></a>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>