角度6如何在用户滚动到div id时将导航栏菜单设置为活动状态 [英] Angular 6 how to set navbar menu active when user scroll to div id
本文介绍了角度6如何在用户滚动到div id时将导航栏菜单设置为活动状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在滚动到div时获取div id。
我的角度6应用程序是一个页面应用程序,当用户点击导航栏时,页面将滑动到div id(我使用ngx-scroll-to)。
我已经完成了,当用户单击导航栏菜单时,它将滑动到div并将类设置为活动的。
我的问题是当用户手动滚动时,如何在导航菜单到达div id时将其设置为活动。
<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>
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将在Windows上调用函数 如我们所说的滚动(窗口:滚动),如果你想这样做的话 Div scroll上的函数只需将(‘scroll’)添加到HostListener
这篇关于角度6如何在用户滚动到div id时将导航栏菜单设置为活动状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文