import { Directive, ElementRef, OnInit } from '@angular/core';
import BScroll from '@better-scroll/core';
import ScrollBar from '@better-scroll/scroll-bar';
import MouseWheel from '@better-scroll/mouse-wheel';
import Wheel from '@better-scroll/wheel';

BScroll.use(Wheel);
BScroll.use(MouseWheel);
BScroll.use(ScrollBar);

/**
 * yarn add better-scroll
 */


@Directive({
  selector: '[appCustomScrollBar]'
})
export class CustomScrollBarDirective implements OnInit{
  private Element: any;
    constructor(Element: ElementRef) {
      console.log(Element);
      this.Element = Element;
  }
  ngOnInit() {
      if (!this.Element.nativeElement.childElementCount) {
        return;
      }
    setTimeout(() => {
      const el = this.Element.nativeElement;
      new BScroll(el, {
        wheel: true,
        scrollY: true,
        scrollbar: true,
        mouseWheel: {
          speed: 20,
          invert: false,
          easeTime: 300
        }
      });
    }, 100);
  }
}
