Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: reserveScrollBarGap option on body-scroll-lock #475

Closed
wants to merge 2 commits into from

Conversation

alexkrautmann
Copy link

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):
without-reserveScrollBarGap

With reserveScrollBarGap:
with-reserveScrollBarGap

@alexkrautmann
Copy link
Author

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

@pradel pradel changed the title Use reserveScrollBarGap on body-scroll-lock feat: reserveScrollBarGap option on body-scroll-lock May 10, 2021
@pradel
Copy link
Owner

pradel commented May 10, 2021

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

@pradel
Copy link
Owner

pradel commented May 10, 2021

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

@codecov
Copy link

codecov bot commented May 10, 2021

Codecov Report

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

Impacted file tree graph

@@           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
Copy link

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

@pradel
Copy link
Owner

pradel commented Dec 14, 2021

closing in favor of #484

@pradel pradel closed this Dec 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants