有没有办法在不使用 nav 的情况下使 scrollspy 工作？或 list-group ？
scrollspy 的 Bootstrap 文档声明它只能在 nav 上使用或 list group成分。 DOCUMENTATION
How it works
Scrollspy has a few requirements to function properly:
- If you’re building our JavaScript from source, it requires util.js.
- It must be used on a Bootstrap nav component or list group.
- Scrollspy requires
position: relative;on the element you’re spying on, usually the<body>.- When spying on elements other than the
<body>, be sure to have aheightset andoverflow-y: scroll;applied.- Anchors (
<a>) are required and must point to an element with that 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>最佳答案
您可以通过使用所需的类 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>关于html - Bootstrap 4 - 如何在不使用 nav 或 list-group 的情况下使 scrollspy 工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54681458/