代码之家 › 专栏 › 技术社区 › Jakub Muda

引导4-如何使ScrollSpy在不使用导航或列表组的情况下工作?

scrollspy bootstrap-4 css html

Jakub Muda · 技术社区 · 5 年前

有办法让ScrollSpy工作吗没有使用 nav 或 list-group ?

ScrollSpy的引导程序文档说明它只能用于 导航卫星 或 list group 组件。 DOCUMENTATION

它是如何工作的

ScrollSpy有几个要求可以正常工作:

如果您是从源代码构建我们的javascript,则需要util.js。

它必须用于引导导航组件或列表组。

ScrollSpy需要 position: relative; 在你监视的元素上,通常 <body> .

当监视除 <身体& ,一定要有一个 height 集合和 overflow-y: scroll; 应用。

锚定器(锚) <a> )是必需的,必须指向具有该ID的元素。

This question 类似,但对于引导3(而不是4),答案是添加 role="tablist" . 好吧,这里不行。关于ScrollSpy有很多问题,但主要是针对引导程序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 回复 | 直到 5 年前

Temani Afif 5 年前

你可以通过使用所需的类来克服这个问题。 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>