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仓库

https://github.com/OshimaYong/AngularDemo

巴特西

Angular 实现Bootstrap ScrollSpy控件

最新文章

热门文章