滚动时如何使链接活动更改？答案

【问题标题】：How to make the link active change when scrolling?滚动时如何使链接活动更改？
【发布时间】：2021-10-18 19:49:00
【问题描述】：

我使用ngx-page-scroll。滚动时如何使链接处于活动状态？

<nav class="navbar">
  <ul class="navbar-items">
    <li><a pageScroll href="#default" class="active">Default</a></li>
    <li><a pageScroll href="#first">First</a></li>
    <li><a pageScroll href="#second">Second</a></li>
    <li><a pageScroll href="#third">Third</a></li>
  </ul>
</nav>

<div class="blocks">
  <div class="block" id="first">First</div>
  <div class="block" id="second">Second</div>
  <div class="block" id="third">Third</div>
</div>

【问题讨论】：

标签： angular

【解决方案1】：

从Github of this library我发现

使用 ngx-page-scroll 无法检测当前滚动部分。该库仅操作滚动位置，但不执行当前滚动位置的任何“读取”操作。寻找类似“scrollspy”的东西，例如使用 ngx-scrollspy 项目。块引用

因此，您需要在没有此库帮助的情况下编写此功能。你可以很容易地做到这一点：

您可以使用@HostListner 的强大功能。从角度。

@HostListener('window:scroll', ['$event']) 
    scrollHandler(event) {
      console.debug("Scroll Event");
    }

在模板中

<div  (scroll)="scrollHandler($event)"  >
       <li class="nav-item" [ngClass]="activeRoute=='home' ? 'active' : ''">
              <a class="nav-link " (click)="active('home')" onclick="return false;" href="#" [ngx-scroll-to]="'#home'">Home</a>
          </li>
          <li class="nav-item" [ngClass]="activeRoute=='services' ? 'active' : ''">
              <a class="nav-link" (click)="active('services')" onclick="return false;" href="#" [ngx-scroll-to]="'#services'">Services</a>
          </li>
....
    </div>

请注意，上面的 HostListener 将调用我们提到的窗口滚动函数 ('window:scroll')，如果您想在 div 滚动上调用此函数，只需添加 ('scroll') 到 HostListener

来源：Angular 6 how to set navbar menu active when user scroll to div id

【讨论】：