Prevent page from scrolling while sidenav is open

[rsnider19]

Note: for support questions, please use one of these channels:
https://github.com/angular/material2/blob/master/CONTRIBUTING.md#question.
This repository's issues are reserved for feature requests and bug reports.

• Do you want to request a feature or report a bug?
  Feature
• What is the current behavior?
  When the sidenav is open in any mode, it scrolls with the page.
• If the current behavior is a bug,
  please provide steps to reproduce and if possible a minimal demo of the problem
  via https://plnkr.co or similar.
• What is the expected behavior?
  I would expect the sidenav to either scroll on it's own, or to not scroll at all.
• What is the motivation / use case for changing the behavior?
  When your page is overflowing vertically, it looks bad if the user were to accidentally scroll while the sidenav is open.
• Which version of Angular and Material, and which browser and OS does this issue affect?
  Did this work in previous versions of Angular / Material?
  Please also test with the latest stable and snapshot versions.
  Angular - 2.0.0-beta.14
  Material - 2.0.0-alpha.2
• Other information
  (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)
  I just noticed that when you remove the transform and -webkit-transform from md-sidenav-layout and md-sidenav-layout > md-content it works.

[jelbourn]

@hansl we should chat about how we want to approach how the sidenav interacts with scrolling.

[jelbourn]

@rsnider19 we looked at this and, as far as we can tell, it's working as intended as intended. You should be able to use overflow auto or scroll on either the sidenav or the content to achieve whatever scrolling behavior desired.

Closing this for now; feel free to reopen if you have a more specific case where we can observe a problem.

[tomdolski]

hello, had the same issue - here is the simple css solution

._md-sidenav-backdrop {
height: 100% !important;
position: fixed !important;
}
.md-sidenav-right {
position: fixed;
}
of course is recomended to not use important just overwrite angulars css

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}