Scroll offset issue when resizing

[dangrima90]

Hi, I have an application which has to be locked to an aspect ratio. To do so I have a Directive that handles the resizing and makes sure that the content stays with the same aspect ratio. This is done with the use of CSS transform: scale().

Here is the directive I have implemented:

import { Directive, ElementRef, HostListener, OnInit, Input } from '@angular/core';

@Directive({
    selector: '[myResize]'
})

export class ResizeDirective implements OnInit {
    baseContentWidth: number;
    baseContentHeight: number;

    @Input() position: string = 'relative';

    private element: HTMLElement;
    private windowWidth: number;
    private windowHeight: number;

    constructor(
        private elementRef: ElementRef
    ) { }

    ngOnInit() {
        this.baseContentWidth = 1920;
        this.baseContentHeight = 1080;

        this.element = this.elementRef.nativeElement;

        this.element.style.width = this.baseContentWidth + 'px';
        this.element.style.height = this.baseContentHeight + 'px';

        this.scaleContent(window.innerWidth, window.innerHeight);
    }

    @HostListener('window:resize', ['$event'])
    onResize(event: Event) {
        let windowRef = event.currentTarget as Window;
            this.scaleContent(windowRef.innerWidth, windowRef.innerHeight);
    }

    private scaleContent(windowWidth: number, windowHeight: number) {
        this.windowWidth = windowWidth;
        this.windowHeight = windowHeight;

        let widthScale = this.windowWidth / this.baseContentWidth;
        let heightScale = this.windowHeight / this.baseContentHeight;

        let newScale = (widthScale < heightScale) ? widthScale : heightScale;
        this.element.style.transform = 'scale(' + newScale + ')';

        this.keepContentCentered(newScale);
    }

    private keepContentCentered(contentScale) {
        let contentWidth = this.baseContentWidth * contentScale;
        let contentHeight = this.baseContentHeight * contentScale;

        let widthDiff = this.windowWidth - contentWidth;
        let heightDiff = this.windowHeight - contentHeight;

        let left = (widthDiff < 0) ? 0 : widthDiff / 2;
        let top = (heightDiff < 0) ? 0 : heightDiff / 2;

        this.element.style.left = left + 'px';
        this.element.style.top = top + 'px';
    }
}

Now in one part of my application I'm trying to implement an infinte scroll. The scrollbar has the following config:

    scrollbarOptions = {
        axis: 'y',
        theme: 'minimal-dark',
        autoHideScrollbar: false,
        advanced: {
            updateOnContentResize: true
        },
        callbacks: {
            onTotalScroll: () => {
                this.onScrollReachEnd.emit();
                this.malihuScrollbarService.update('#test-scrollbar');
            }
        }
    };

For some reason the scrollbar won't go all the way down when the window is not set to full screen (i.e. full screen after pressing F11 to go full screen mode). I tried enabling updateOnContentResize thinking that it might help fix the issue, but no luck so far.

I know that this is a very specific scenario but I was wondering if you might have an idea of what I can do to solve it.