Angular 5 Stop background scrolling when mat-sidenav-container displayed
11,655
Solution 1
Managed to do it with a bit of CSS
. not bother that the back content scrolls but now my side-nav
and backdrop do not move
CSS Used
.mat-drawer:not(.mat-drawer-side) {
position: fixed;
}
.mat-drawer-backdrop {
position: fixed !important;
}
Solution 2
adding fixedInViewport="true"
in mat-sidenav may fix the issue, also add [style.marginTop.px]="56"
Author by
murday1983
I started my IT career as a web tester and am now a frontend web developer and UX web designer.
Updated on June 22, 2022Comments
-
murday1983 almost 2 years
I'm creating a new
Angular 5
site that has amat-sidenav
but i have an issue with it.My
mat-sidenav-container
sits under myposition: fixed
main menu which is fine but if the page has a vertical scroll, if themat-sidenav
is displayed it too scrolls.What i'm after is to stop the back content scrolling if the
mat-sidenav
is displayed but i don't know theCSS
to do this as i have tried all theposition
HTML
<mat-toolbar> <mat-icon class="subMenuIcon" (click)="sidenav.toggle()" title="Click to open the sub-menu.">reorder</mat-icon> <img src="./assets/images/Crest.jpg">LEARNING SITE <div class="emptySpace"></div> <mat-icon class="loggedInIcon">person</mat-icon> <span style="font-size: 15px">USERNAME</span> </mat-toolbar> <mat-sidenav-container> <mat-sidenav #sidenav mode="over" opened="false"> <div class="closeButton"> <mat-icon (click)="sidenav.toggle()" title="Click to close the sub-menu.">clear</mat-icon> </div> <a (click)="sidenav.toggle()" routerLink="/"> <mat-icon>person</mat-icon> Dashboard </a> <a (click)="sidenav.toggle()" routerLink="search"> <mat-icon>search</mat-icon> Search </a> </mat-sidenav> </mat-sidenav-container> <router-outlet></router-outlet>
CSS
mat-sidenav { background-color: gray; margin-top: 64px; color: #ffffff; transition: 0.5s; padding: 7px; } mat-sidenav a { margin-top: 15px; margin-bottom: 15px; font-size: 17px; color: #ffffff; display: block; } mat-sidenav a:hover { color: #c41230; cursor: pointer; } .closeButton { text-align: right; margin-bottom: 15px; cursor: pointer; } .mat-drawer-container { position: static; } /* Moves the side-nav to below the main menu */ .mat-drawer-backdrop { margin-top: 64px !important; }
-
andreas over 5 yearsNote that your variable
event
inonWindowScroll(event)
is undefined. Apply the following to the first line in method 1:@HostListener("window:scroll", ["$event"])
. I used this in Angular 6+. -
eddy almost 4 yearsThis helps keep the drawer in place , but the other line messes up everything.
-
eddy almost 4 yearsDid you managed to avoid showing the scrollbar in the main content when the mat-sidenav is displayed?
-
eddy almost 4 yearsI tried both options. None of them worked. Do you have any idea how to stop the scrolling on the main content when the sidenav is displayed?
-
John almost 4 yearsIt is difficult to tell without seeng your code. Maybe you can ask a question, link to this thread, and get some help from there?
-
adamdport almost 4 yearsThere's a
fixedTopGap
attribute you can use instead of manually settingmarginTop
material.angular.io/components/sidenav/api#MatSidenav -
Santosh about 3 yearsIt does work but with a bug. The page is scroll to the top which is not good.