Question

是否有一种方法可以使用nav或list-group来使滚动工作没有？

scrollspy的引导程序文档指出，它只能在nav或list group组件上使用。 DOCUMENTATION

工作原理

Scrollspy具有一些正常运行的要求：


如果您要从源代码构建JavaScript，则需要util.js。

必须在Bootstrap导航组件或列表组上使用。

Scrollspy要求您监视的元素通常为position: relative;，<body>。

在监视<body>以外的元素时，请确保设置了height并应用了overflow-y: scroll;。

锚点（<a>）是必需的，并且必须指向具有该ID的元素。

This question与之类似，但对于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>

Answer 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>

Bootstrap 4-如何在不使用导航或列表组的情况下使SCROLLSPY工作？

工作原理

代码：

1 个答案: