Scroll blocking removes scrollbar, causes content to shift

[jjsiman]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior The current implementation of the scroll blocker adds overflow: hidden to the body. This removes the scrollbar and causes the content in the background to shift.

Expected behavior The overlay and modal could exist on top of the overflowed background content. When opened, the background would still have a scrollbar, but would not be scrollable. Angular Material's mat-dialog does this.

Reproduction of the problem This occurs on the demo page.

What is the motivation / use case for changing the behavior? Can lead to jittery behavior for users. For instance, items laid out in an inline grid may be shifted down rows.

Please tell us about your environment: macOS Catalina 10.15.4

• Smart Modal version: 0.8.x 7.4.0

• Angular version: 2.0.x 9.1.0

[maximelafarie]

Hi @jjsiman, I see what you mean. I'll take a look at it and see if it can take place in our non-breaking changes features roadmap.