Scrolling does not work when inside an Angular Material Sidenav

[AustinHatem]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report 
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Scrolling does not work when inside an Angular Material Sidenav.

Expected behavior

For it to work.

Minimal reproduction of the problem with instructions

Here is a stackblitz of it not working in Angualar Material Sidenav. if I take it out of the sidenav component then the scrolling will work.

https://stackblitz.com/edit/angular-37wifk

What is the motivation / use case for changing the behavior?

I would like to use this product with Angular Materials

Your version of @nicky-lenaers/ngx-scroll-to: Using latest version

Browser:

• [X ] Chrome (desktop) version 63
• [ ] Chrome (Android) version XX
• [ ] Chrome (iOS) version XX
• [ ] Firefox version XX
• [ ] Safari (desktop) version XX
• [ ] Safari (iOS) version XX
• [ ] IE version XX
• [ ] Edge version XX

[Azkali]

I've encountered the same issue.

After adding a 2nd [ngx-scroll-to] button with in my project inside the Angular Material Sidenav, I was not able to use the 1st but the 2nd would work as intended. If I add more [ngx-scroll-to] buttons they simply won't work.

However when opening my web browser's console an event is still catched by the Angular Material Sidenav when trying to click on any [ngx-scroll-to] button.

[yanis-git]

hi @AustinHatem i have notice on your demo is .mat-drawer-content who have overflow: auto. If you disable this property your are able to scroll to right position.

[ksonho]

I have a similar issue in form tag. <form [formGroup]="Form"> <div *ngIf="test" formArrayName="people"> <div *ngFor="let person of Form.controls.people.controls; let index = index;" [formGroupName]="person_index"> <div id="person{{person_index}}">

And I kept moving to the top of the screen instead the the corresponding place.

[yanis-git]

@ksonho i can't see any angular sidenav on your sample. Could you post us https://stackblitz.com/ reproductible issue ?

[yanis-git]

I’am fine to keep same issue.

Could you post renderable sample of your issue. I will try my best to solve it.

Le 14 juin 2018 à 06:06, ksonho [email protected] a écrit :

yep, i am not using angular sidenav. I am using the form group and form control for it. maybe I need to create another issue?

[mehs2690]

When I open my page on my smartphone, the scroll works fine the first time, then it does not work anymore. I am using [ngx-scroll-to] to "ID's" in fixed navbar

[wduville]

I applied @yanis-git tips and it worked for me. For my specific case I had also .mat-tab-body-content and .mat-tab-body.mat-tab-body-active to disable:

.mat-drawer-content, .mat-tab-body-content {
    overflow: hidden !important
}

.mat-tab-body.mat-tab-body-active {
    overflow-y: hidden !important;
} 

[rafa-suagu]

Closed due inactivity