import {Directive, HostListener} from '@angular/core';
@Directive({
  selector: '[appScrollProgress]'
})
export class ScrollProgressDirective {
  constructor(
  ) {}
  @HostListener('window:scroll', ['$event'])
  onWindowScroll(event) {
    const winScroll = event.target.documentElement.scrollTop || event.currentTarget.scrollTop || document.body.scrollTop;
    const height = (event.target.documentElement.scrollHeight || event.currentTarget.scrollHeight ) -
      (event.target.documentElement.clientHeight || event.currentTarget.clientHeight);
    const scrolled = (winScroll / height) * 100;
    document.getElementById('scrollBar').style.width = scrolled + '%';
  }
}

It’s working for me. Good job, dude

Reply