Open tditlu opened 5 years ago
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.
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 paddingRightElements
is default set to [document.body]
.
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';
});
… 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.