Implementation does not reserve the scrollbar width

[martinkutter]

Thank you for this easy to use library.
Unfortunately, it doesn't quite fit our application.
The content of our site is centered. If the user opens a popup and we execute "disableBodyScroll", the scrollbar is removed. This makes the body slightly wider than before and the centered elements in the background jump to the right.

In this case it would make sense to reserve the space for the scrollbar. Could the following solution, possibly optional, fit to the library? Then I would create a PullRequest.

var setOverflowHidden = function setOverflowHidden() {
  // Setting overflow on body/documentElement synchronously in Desktop Safari slows down
  // the responsiveness for some reason. Setting within a setTimeout fixes this.
  setTimeout(function () {
    var padding = window.innerWidth - document.body.clientWidth;
    document.body.style.paddingRight = padding + 'px';
    document.body.style.overflow = 'hidden';
    document.documentElement.style.overflow = 'hidden';
  });
};

var setOverflowAuto = function setOverflowAuto() {
  // Setting overflow on body/documentElement synchronously in Desktop Safari slows down
  // the responsiveness for some reason. Setting within a setTimeout fixes this.
  setTimeout(function () {
    document.body.style.paddingRight = 0;
    document.body.style.overflow = 'auto';
    document.documentElement.style.overflow = 'auto';
  });
};

[willmcpo]

hi @martinkutter

thanks for the code - happy for you to create the PR.

Once you create it, I'll try to have it reviewed quickly.

[FL3NKEY]

You are welcome.

https://github.com/FL3NKEY/scroll-lock

[martinkutter]

@FL3NKEY thanks for the recommendation. We want to use the library for a large React app, so abstraction is a minimum requirement. However, this is not possible due to the fixed CSS class names. This means that the library cannot simply be replaced later if problems arise.

I'm on my way to the React Conference in Amsterdam/NL. When I get back I'll take care of the PR.

[Tobbe]

Can't wait for the PR. I need this as well! :)
@martinkutter Any progress?

[FL3NKEY]

@martinkutter updated, check out 🤗

[martinkutter]

Sorry for the delay. Let me look at the solution from @FL3NKEY next week and I'll get back to you.

[willmcpo]

@martinkutter 👍 let me know how it goes - if you end up not putting a PR through, I'll adapt your suggestion and create a PR for body-scroll-lock.

[martinkutter]

Thanks for your patience 😅. I created a PR. #14
@willmcpo please have a look and if everything fits I would be happy about a suggestion for the docs.

[FL3NKEY]

@martinkutter what's the problem using my library?

[martinkutter]

@FL3NKEY As I mentioned before, we use this library in a large React application based on plugins. For example, a normal use case is that one component activates the scrolllock, then a second component is mounted, which also activates the scrolllock. If the first component deactivates the scrolllock, it is not considered that it is still needed by the second component. So I decided to continue using this library, which can handle it correctly.

[FL3NKEY]

@martinkutter oh, i got it, work at that 🤗

[FL3NKEY]

@martinkutter updated

[willmcpo]

@martinkutter thanks I've reviewed it and no problems with the delay 👍

[willmcpo]

PR #14 pending minor change and then will merge