How to use the igniteui-angular.AbsoluteScrollStrategy function in igniteui-angular

public childDataKey = "Children";
    public groupColumnKey = "Categories";

    public items: any[] = [{field: "Export native"}, { field: "Export JS Excel"}];

    public _positionSettings: PositionSettings = {
        horizontalDirection: HorizontalAlignment.Left,
        horizontalStartPoint: HorizontalAlignment.Right,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    public _overlaySettings: OverlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
        scrollStrategy: new AbsoluteScrollStrategy()
    };

    private subscription;
    private selectedButton;
    private _timer;

    // tslint:disable-next-line:member-ordering
    constructor(private zone: NgZone, private localService: LocalDataService, private elRef: ElementRef) {
        this.subscription = this.localService.getData(this.volume);
        this.localService.records.subscribe((d) => this.data = d);
    }
    // tslint:disable-next-line:member-ordering
    public ngOnInit() {
        if (this.theme) {
            document.body.classList.add("fin-dark-theme");
        }

public childDataKey = "Children";
    public groupColumnKey = "Categories";

    public items: any[] = [{ field: "Export native" }, { field: "Export JS Excel" }];

    public _positionSettings: PositionSettings = {
        horizontalDirection: HorizontalAlignment.Left,
        horizontalStartPoint: HorizontalAlignment.Right,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    public _overlaySettings: OverlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
        scrollStrategy: new AbsoluteScrollStrategy()
    };

    private subscription;
    private selectedButton;
    private _timer;
    private volumeChanged;

    // tslint:disable-next-line: max-line-length
    constructor(private zone: NgZone, private localService: LocalDataService, private elRef: ElementRef, private cdr: ChangeDetectorRef) {
        this.subscription = this.localService.getData(this.volume);
        this.localService.records.subscribe(x => { this.data = x; });
    }

    public ngOnInit() {
        this.grid1.sortingExpressions = [{ fieldName: this.groupColumnKey, dir: SortingDirection.Desc }];
        this.volumeChanged = this.volumeSlider.onValueChange.pipe(debounce(() => timer(200)));

public overlayDemo: ElementRef;

    @ViewChild("mainContainer")
    public mainContainer: ElementRef;

    private _defaultPositionSettings: PositionSettings = {
        target: null,
        horizontalDirection: HorizontalAlignment.Center,
        horizontalStartPoint: HorizontalAlignment.Center,
        verticalDirection: VerticalAlignment.Middle,
        verticalStartPoint: VerticalAlignment.Middle
    };

    private _overlaySettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(),
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: true,
        closeOnOutsideClick: true
    };

    private destroy$ = new Subject();
    private _overlayId: string;

    constructor(
        @Inject(IgxOverlayService) public overlay: IgxOverlayService
    ) {
        //  overlay service deletes the id when onClosed is called. We should clear our id
        //  also in same event
        this.overlay
            .onClosed
            .pipe(
                filter((x) => x.id === this._overlayId),

public ngOnInit(): void {
        const positionSettings: PositionSettings = {
            closeAnimation: scaleOutBottom,
            horizontalDirection: HorizontalAlignment.Right,
            horizontalStartPoint: HorizontalAlignment.Left,
            openAnimation: scaleInTop,
            target: this.igxSelect.inputGroup.element.nativeElement,
            verticalDirection: VerticalAlignment.Bottom,
            verticalStartPoint: VerticalAlignment.Bottom
        };
        this.customOverlaySettings = {
            positionStrategy: new ConnectedPositioningStrategy(
                positionSettings
            ),
            scrollStrategy: new AbsoluteScrollStrategy()
        };
    }
}

public childDataKey = 'Children';
    public groupColumnKey = 'Categories';

    public items: any[] = [{ field: 'Export native' }, { field: 'Export JS Excel' }];

    public positionSettings: PositionSettings = {
        horizontalDirection: HorizontalAlignment.Left,
        horizontalStartPoint: HorizontalAlignment.Right,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    public overlaySettings: OverlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        positionStrategy: new ConnectedPositioningStrategy(this.positionSettings),
        scrollStrategy: new AbsoluteScrollStrategy()
    };

    private subscription;
    private selectedButton;
    private timer;
    private volumeChanged;

    constructor(private zone: NgZone, private localService: LocalDataService, private elRef: ElementRef) {
        this.subscription = this.localService.getData(this.volume);
        this.localService.records.subscribe((d) => this.data = d);
    }

    public ngOnInit() {
        this.grid1.sortingExpressions = [{ fieldName: this.groupColumnKey, dir: SortingDirection.Desc }];
        this.volumeChanged = this.volumeSlider.onValueChange.pipe(debounce(() => timer(200)));
        this.volumeChanged.subscribe(

public onClickScrollStrategy(event: Event, strat: string) {
        event.stopPropagation();
        let scrollStrategy;
        switch (strat) {
            case ("absolute"):
                scrollStrategy = new AbsoluteScrollStrategy();
                break;
            case ("block"):
                scrollStrategy = new BlockScrollStrategy();
                break;
            case ("close"):
                scrollStrategy = new CloseScrollStrategy(this.mainContainer.nativeElement);
                break;
            default:
                scrollStrategy = new NoOpScrollStrategy();
        }
        const showSettings = Object.assign(Object.assign({}, this._overlaySettings), {
            scrollStrategy,
            modal: false
        });
        this.overlay.show(this.overlayDemo, showSettings);
    }

public overlayDemo: ElementRef;

    @ViewChild("mainContainer")
    public mainContainer: ElementRef;

    private _defaultPositionSettings: PositionSettings = {
        target: null,
        horizontalDirection: HorizontalAlignment.Center,
        horizontalStartPoint: HorizontalAlignment.Center,
        verticalDirection: VerticalAlignment.Middle,
        verticalStartPoint: VerticalAlignment.Middle
    };

    private _overlaySettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(),
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: true,
        closeOnOutsideClick: true
    };
    constructor(
        @Inject(IgxOverlayService) public overlay: IgxOverlayService
    ) { }

    public onClickDirection(horAlign: HorizontalAlignment, vertAlign: VerticalAlignment) {
        const positionSettings =
            Object.assign(Object.assign({}, this._defaultPositionSettings), {
                target: this.directionDemo.nativeElement,
                horizontalDirection: horAlign, verticalDirection: vertAlign
            });
        const showSettings =
            Object.assign(Object.assign({}, this._overlaySettings), {
                positionStrategy: new ConnectedPositioningStrategy(positionSettings)

public onClickScrollStrategy(strategy: string) {
        let scrollStrategy;
        const positionStrategy = new ConnectedPositioningStrategy();
        switch (strategy) {
            case ("absolute"):
                scrollStrategy = new AbsoluteScrollStrategy();
                positionStrategy.settings.target = this.scrollDemo.nativeElement.children[0];
                break;
            case ("block"):
                scrollStrategy = new BlockScrollStrategy();
                positionStrategy.settings.target = this.scrollDemo.nativeElement.children[1];
                break;
            case ("close"):
                scrollStrategy = new CloseScrollStrategy(this.mainContainer.nativeElement);
                positionStrategy.settings.target = this.scrollDemo.nativeElement.children[2];
                break;
            default:
                scrollStrategy = new NoOpScrollStrategy();
                positionStrategy.settings.target = this.scrollDemo.nativeElement.children[3];
        }
        this.overlay.show(this.overlayId, {
            positionStrategy,