feat: reserveScrollBarGap option on body-scroll-lock

[alexkrautmann]

From the body-scroll-lock README:

If the overflow property of the body is set to hidden, the body widens by the width of the scrollbar. This produces an unpleasant flickering effect, especially on websites with centered content. If the reserveScrollBarGap option is set, this gap is filled by a padding-right on the body element.

Without reserveScrollBarGap (current behavior):

With reserveScrollBarGap:

[alexkrautmann]

I can also make this behavior configurable via a prop, let me know if you think that makes sense.

[pradel]

@alexkrautmann thanks for the pr it looks like a great addition! Would be great to make it configurable via a prop indeed :)

[pradel]

I also think that by default the value should be false (to avoid being a breaking change.)

[codecov[bot]]

Codecov Report

Merging #475 (a9c0825) into master (23cccc6) will not change coverage. The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master     #475   +/-   ##
=======================================
  Coverage   97.20%   97.20%           
=======================================
  Files           6        6           
  Lines         179      179           
  Branches       66       65    -1     
=======================================
  Hits          174      174           
  Misses          5        5           

Impacted Files	Coverage Δ
react-responsive-modal/src/useScrollLock.ts	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 23cccc6...a9c0825. Read the comment docs.

[evisotskiy]

Hi guys! Look forward to this addition! Do you know when it will be finished?

[pradel]

closing in favor of https://github.com/pradel/react-responsive-modal/pull/484