要实现粘性滚动条和ViewportScroller,并使用粘性导航栏滚动到锚点元素,可以按照以下步骤进行操作。
npm install ngx-page-scroll --save
import { NgxPageScrollModule } from 'ngx-page-scroll';
@NgModule({
imports: [
NgxPageScrollModule,
// other imports
],
// other code
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import { ViewportScroller } from '@angular/common';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
constructor(private viewportScroller: ViewportScroller) { }
ngOnInit(): void {
}
}
scrollToSection(section: string): void {
this.viewportScroller.scrollToAnchor(section);
}
现在,当点击导航栏中的链接时,页面将滚动到相应的锚点元素。