Add ability to defined which element to be right padded...

[tditlu]

… when scrollBarGap option is set. If you have a position fixed menu for example, you don't want the body to get the padding but the menu.

[thanosasimo]

Very nice idea @tditlu. I tried the feature from your forked repo but when paddingRightElement is set, the padding from body does not apply. Also it would be great if the option could support multiple element selectors.

[tditlu]

Very nice idea @tditlu. I tried the feature from your forked repo but when paddingRightElement is set, the padding from body does not apply. Also it would be great if the option could support multiple element selectors.

Yes, you are choosing another padding element, instead of document.body, but i have implemented multiple padding selectors, so you can call enableBodyScroll like this:

const options: BodyScrollOptions = {
    reserveScrollBarGap: true,
    paddingRightElements: [document.body, document.getElementById('menu')]
}

enableBodyScroll(targetElement, options);

And paddingRightElementsis default set to [document.body].

[smolnikov]

I'd suggest another solution here, because setting the padding won't always be an option – padding might be already specified for some elements, like #menu in example.

What if we have a callback that will receive the padding value as an argument?

const options = {
  reserveScrollBarGap: true
};

disableBodyScroll(targetElement, options, (scrollGapWidth) => {
  //you can do whatever you want with scroll gap width value
  document.getElementById('menu').style.paddingRight = scrollGapWidth + 'px';
});