Bootstrap 4 - как заставить SCROLLSPY работать БЕЗ использования nav или list-group?

Есть ли способ заставить scrollspy работать БЕЗ использования nav или же list-group?

Документация Bootstrap для 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.

КОД: 

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

Источник

1 ответ

Решение

Вы можете преодолеть это, используя необходимый класс list-group-item и сбросьте CSS так, как вы хотите:

/*DEMO*/

nav {
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%)
}

#nav a {
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: .5rem;
  padding: 0;
  border: none;
  border-radius: 0;
}


/*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" class="list-group-item"></a>
    <a href="#item-2" class="list-group-item"></a>
    <a href="#item-3" class="list-group-item"></a>
    <a href="#item-4" class="list-group-item"></a>
    <a href="#item-5" class="list-group-item"></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>

Источник
Другие вопросы по тегам