Angular 实现Bootstrap ScrollSpy控件
Bootstap是基于JQuery开发,Angular中不支持Bootstrap相关事件逻辑。本文基于Typecript开发了一个Angular可用的ScrollSpy控件。Scrollspy控件主要实现了左侧导航以及右侧正文之间的联动和切换。所以,
此组件主要解决两个问题:
(1)点击左侧导航列表,右侧正文能够跟随切换的焦点定位到具体的段落,即添加导航点击事件
(2)右侧正文滚动时,左侧导航列表可以根据正文滚动的位置自动定位到,该段落所属的目录索引上。即添加正文滚动事件。
1. 代码结构
1.组件代码
滚动监听指令:
监听滚动事件,并且获取当前滚动焦点的元素值(element)然后切换当前导航树位置(postion),触发positionchange事件函数。
//scrollspy.direct.ts import { Directive, Injectable, Input, EventEmitter, Output, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[NgScrollSpy]' }) export class NgScrollSpyDirective { @Output() public positonChange = new EventEmitter<string>(); private currentposition: string; private Tags = ['DIV']; constructor(private _el: ElementRef) {} @HostListener('scroll', ['$event']) //监听正文滚动事件 onScroll(event: any) { let position: string; const children = this._el.nativeElement.children; const scrollTop = event.target.scrollTop; const parentOffset = event.target.offsetTop; for (let i = 0; i < children.length; i++) { const element = children[i]; if (this.Tags.some(tag => tag === element.tagName)) { if ((element.offsetTop - parentOffset) <= scrollTop) { position = element.id; } } } if (position !== this.currentposition) { this.currentposition = position; this.positonChange.emit(this.currentposition); } } }
通过scrollTo(position :string)函数获取左侧导航树点击位置,并操作DOM定位到对应位置。
通过onPositionChange(position: string)函数获取右侧正文的滚动位置。
//ngscrollspy.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ngscrollspy', templateUrl: './ngscrollspy.component.html', styleUrls: ['./ngscrollspy.component.css'] }) export class NgscrollspyComponent implements OnInit { constructor() { } ngOnInit() { } currentPostion = 'Phase1'; // 正文滚动事件 设置当前滚动位置,供NgScrollSpyDirective使用 onPositionChange(position: string) { this.currentPostion = position; } // 导航点击事件 查找目录节点别切换到节点 scrollTo(position :string) { document.querySelector('#' + position) .scrollIntoView(); } }
html
//ngscrollspy.component.html <div class="container"> <div class="row"> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6"> <h2>导航</h2> <div (click)="scrollTo('phase1')">段落1 <ng-container *ngIf="currentPostion==='phase1'">++</ng-container> </div> <div (click)="scrollTo('phase2')">段落2 <ng-container *ngIf="currentPostion==='phase2'">++</ng-container> </div> <div (click)="scrollTo('phase3')">段落3 <ng-container *ngIf="currentPostion==='phase3'">++</ng-container> </div> <div (click)="scrollTo('phase4')">段落4 <ng-container *ngIf="currentPostion==='phase4'">++</ng-container> </div> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6"> <div id="phases" NgScrollSpy (positonChange)="onPositionChange($event)" style="height:150px;overflow-y: scroll;"> <div id="phase1"> <h2 style="margin:0">段落 1</h2> <PhaseText></PhaseText> </div> <div id="phase2"> <h1>段落 2</h1> <PhaseText></PhaseText> </div> <div id="phase3"> <h1>段落 3</h1> <PhaseText></PhaseText> </div> <div id="phase4"> <h1>段落 4</h1> <PhaseText></PhaseText> </div> </div> </div> </div> </div>
详细代码可以访问github仓库