Проблема с полосой прокрутки sidenav - Angular Material 6

Question

Я относительно новичок в Angular.Я реализую в своем проекте пример kenji sidenav-1996 ссылка здесь .

Многие из вариантов поведения бокового меню - это то, что мне нужно, однако у меня проблема с полосой прокрутки, когдапробуя это для мобильной среды.Когда вы скрываете меню и показываете его снова, полоса прокрутки меню не сохраняет положение, в котором оно было оставлено, а «перезагружается» и возвращается обратно.Я знаю, что это может показаться мелочью, но я твердо верю, что пользовательский опыт основан на этом, на исправлении этих мелких деталей и обеспечении удобства пользователя

Следующие изображения лучше описывают проблему:)

полоса прокрутки вниз

полоса прокрутки скрыта

полоса прокрутки вверх

Я просмотрел документацию по Angular и Angular материалу, но я не нашел соответствующего решения или, может быть, я не совсем понял его.: (

Я просмотрел документацию по Angular и Angular материалу, но не нашел соответствующего решения или, возможно, не очень хорошо понял документацию.: (

HTML-компонент:

<mat-toolbar color="primary" class="main-nav mat-elevation-z4">

    <button mat-icon-button (click)="start.toggle()" class="icon-padding">
        <mat-icon aria-hidden="true">menu</mat-icon>
    </button>
    <button mat-button routerLink="/"><strong>Prueba Menu Sidenav</strong></button>

    <!-- This fills the remaining space of the current row -->
    <span class="fill-remaining-space"></span>

    <button mat-icon-button class="icon-padding">
        <mat-icon aria-hidden="true">notifications</mat-icon>
    </button>

</mat-toolbar>

<mat-sidenav-container class="sidenav-container">

    <mat-sidenav class="mat-elevation-z10" #start [opened]="open" fixedTopGap="64" [mode]="mode" fixedInViewport="true" style="width:240px;">

        <mat-list dense>
            <ng-container *ngFor="let nav of navList">
                <mat-expansion-panel class="mat-elevation-z0" hideToggle="true" [expanded]="nav.dropDown">
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            <mat-icon mat-list-icon>{{nav.icon}}</mat-icon>
                            <span class="nav-list-item" style="margin-left: 10px;">{{nav.categoryName}}</span>
                        </mat-panel-title>
                    </mat-expansion-panel-header>
                    <mat-nav-list>
                        <div style="margin-top: -20px;">
                            <ng-container *ngFor="let subCategory of nav.subCategory">
                                <ng-container *ngIf="subCategory.visable"> <!--Sub category list-->
                                    <mat-list-item (click)="mode === 'over'? start.close() : null" routerLinkActive="mat-icon-active" style="margin-left: -70px;margin-right: -24px;">
                                        <a mat-list-item [routerLink]="subCategory.subCategoryLink"  mat-line style="margin-left: 30px;">
                                            <mat-icon class="sidenav-icon" style="margin-left: 18px;">{{subCategory.subCategoryQuery}}</mat-icon>
                                            <span style="margin-left: 3px;">{{subCategory.subCategoryName}}</span>
                                        </a>
                                    </mat-list-item>
                                </ng-container>
                            </ng-container>
                        </div>
                    </mat-nav-list>
                </mat-expansion-panel>
            </ng-container>
        </mat-list>

    </mat-sidenav>

    <mat-sidenav-content style="margin-top:64px;">
        <div style="margin: 10px;">
            <router-outlet></router-outlet>
        </div>
        <div style="height: 64px;"></div>
    </mat-sidenav-content>

</mat-sidenav-container>


<mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item routerLink="/profile"><mat-icon aria-hidden="true">settings</mat-icon>Settings</button>
    <button mat-menu-item routerLink="/profile"><mat-icon aria-hidden="true">account_box</mat-icon>Profile</button>
    <button mat-menu-item routerLink="/profile"><mat-icon aria-hidden="true">exit_to_app</mat-icon>Sign out</button>
</mat-menu>

Component.ts:

import {Component, NgZone, OnInit} from '@angular/core';
import {Router} from '@angular/router';

@Component({
    selector: 'app-main',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {

    // Sidenav responsive
    width;
    height;
    mode = 'side';
    open = 'true';
    title = 'Responsive Sidenav Starter';
    navList: NavList[];

    constructor(public ngZone: NgZone,
                public route: Router, ) {
        this.navList = [
            { categoryName: 'Menu', icon: 'face', dropDown: true,
                subCategory:
                    [
                        { subCategoryName: 'Submenu', subCategoryLink: '/link', visable: true, },
                        { subCategoryName: 'Submenu', subCategoryLink: '/principal', visable: true, },
                        { subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
                    ]
            },
            { categoryName: 'Menu', icon: 'face', dropDown: false,
                subCategory:
                    [
                        { subCategoryName: 'Submenu', subCategoryLink: '/link', visable: true, },
                        { subCategoryName: 'Submenu', subCategoryLink: '/principal', visable: true, },
                        { subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
                    ]
            },
            { categoryName: 'Menu', icon: 'question_answer', dropDown: false,
                subCategory:
                    [
                        { subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
                        { subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
                        { subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
                    ]
            },
            { categoryName: 'Menu', icon: 'work', dropDown: false,
                subCategory:
                    [
                        { subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
                        { subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
                        { subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
                    ]
            },
        ];
        this.changeMode();
        window.onresize = (e) => {
            ngZone.run(() => {
                this.changeMode();
            });
        };
    }

    ngOnInit() {

    }

    changeMode() {
        this.width = window.innerWidth;
        this.height = window.innerHeight;
        if (this.width <= 800) {
            this.mode = 'over';
            this.open = 'false';
        }
        if (this.width > 800) {
            this.mode = 'side';
            this.open = 'true';
        }
    }

}

export class NavList {
    categoryName: string;
    icon: string;
    dropDown: boolean;
    subCategory: NavListItem[];
    constructor(_categoryName: string, _icon: string, _dropDown: boolean, _subCategory: NavListItem[]) {
        this.categoryName = _categoryName;
        this.icon = _icon;
        this.dropDown = _dropDown;
        this.subCategory = _subCategory;
    }
}

export class NavListItem {
    subCategoryName: string;
    subCategoryLink: string;
    subCategoryQuery?: any;
    visable: boolean;
}

Component.scss:

// angular material colors
@import '../../../theme';

.sidenav-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}



.main-nav {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%  !important;
    z-index: 5;
}

.icon-padding {
    margin-left: 3px;
    margin-right: 3px;
}

.nav-list-exp {
    padding: 0 !important;
}

.nav-list-item {
    background-color: #FFF;
    transition: background 0.2s linear;
}
.mat-icon-active mat-icon {
    transition: color 0.2s linear;
    color: mat-color($primary) !important;
}
.nav-category-open {
    transition: color 0.2s linear;
    color: mat-color($primary) !important;
}
.nav-list-item:hover {
    cursor: pointer;
    background:#c5c5c5;
}

.nav-list-item-text {
    padding-left: 18px;
    font-size: 0.8em;
}

.nav-list-icon {
    margin-left: 5px;
}


mat-toolbar {
    height:  64px !important;
    min-height: 64px !important;

    mat-toolbar-row {
        height: 64px !important;
    }
}

Заранее спасибо за помощь:)