javascript - Bootstrap 4 Scrollspy未在滚动上指示

我想实现一个bootstrap scrollspy。我认为我已经成功实现了它，但是没有用。我的基于滚动位置的菜单项未显示。活动类未添加到锚点。有人可以告诉我我哪里错了，我的代码有什么变化吗？

ul {
  list-style:none;
  padding: 0;
}
.scroll-area {
  margin-top: 30px;
  height: 250px;
  position: relative;
  overflow: auto;
}
.scroll-area div {
  height: 300px;
    color: #fff;
}
.scroll-area div:first-child { background: green; }
.scroll-area div:nth-child(2) {background: purple;}
.scroll-area div:nth-child(3) {background: orange;}
.scroll-area div:nth-child(4) {background: blue;}
.scroll-area div:nth-child(5) {background: black;}

#main-nav li {
  display: inline-block;
  margin-right: 30px;
}
#main-nav li a {
  color: #000;
}

#main-nav li a.active {
  color: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-3">
      <nav id="main-nav">
        <ul class="nav">
          <li><a href="#a" class="active">Link1</a></li>
          <li><a href="#b">Link2</a></li>
          <li><a href="#c">Link3</a></li>
          <li><a href="#d">Link4</a></li>
          <li><a href="#e">Link5</a></li>
        </ul>
      </nav>
    </div>
    <div class="col-9">
          <div class="scroll-area" data-spy="scroll" data-target="#main-nav" data-offset="0">
          <div id="a">Austria</div>
          <div id="b">Bolivia</div>
          <div id="c">Canada</div>
          <div id="d">Denmark</div>
          <div id="e">England</div>
      </div>
    </div>
  </div>
</div>

最佳答案

Scrollspy组件查找nav-link类...

   <ul class="nav">
      <li><a href="#a" class="nav-link active">Link1</a></li>
      <li><a href="#b" class="nav-link">Link2</a></li>
      <li><a href="#c" class="nav-link">Link3</a></li>
      <li><a href="#d" class="nav-link">Link4</a></li>
      <li><a href="#e" class="nav-link">Link5</a></li>
   </ul>

演示：https://codeply.com/p/tqHAOdCNVZ

关于javascript - Bootstrap 4 Scrollspy未在滚动上指示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58862615/