overlay: Investigate ways of blocking body scroll

[crisbeto]

We need a way of blocking body scroll when something like a dialog is open. There are a few ways this can be done:

1. An approach, similar to Material 1, where we set position: fixed on the body and we offset the scroll position. This approach is pretty reliable, but can have unexpected consequences.
2. Using preventDefault on touch, keyboard and mousewheel events, as well as saving the scroll position and resetting it in a scroll handler. Mostly works, but can still cause jumping in certain browsers.
3. Setting overflow: hidden on the body and adding padding-left with the size of the scrollbar to prevent content jumping. May be tricky to determine the scrollbar width. Can also conflict with user styling.

I'm open to more suggestions since none of these solutions are perfect.

Related to #1633.

[fxck]

This is one of those things that simply do not have the perfect way of doing it. :) I say go with whatever "works" in material1, potentially change later.

[huygaa11]

Hi @crisbeto
Do you have an eta? Thanks.

[epelc]

@crisbeto Would option 2 cause double scrollbars?

One nice property about the material1 method is that if you have a sidenav and lock scrolling on the body(or equivalent content area) you do not end up with 2 scrollbars showing at once if your sidenav is tall.

[crisbeto]

Option 2 is purely JS and can't cause multiple scrollbars @epelc, but it's not guaranteed that it'll block scrolling in all cases.

[MateuszG]

any news?

[crisbeto]

There's a pending PR, it just isn't merged yet.

[tagazok]

friendly ping :)
Any plan to merge the PR soon?

[jelbourn]

This is in master now and will be part of the next release.

[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.}