Used to get the scrollbar width and set the right padding for when a modal dialog is opened
// https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.4/js/src/modal.js#L436-L443
export function getScrollbarWidth() {
let scrollDiv = document.createElement('div');
// .modal-scrollbar-measure styles // https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.4/scss/_modal.scss#L106-L113
scrollDiv.style.position = 'absolute';
scrollDiv.style.top = '-9999px';
scrollDiv.style.width = '50px';
scrollDiv.style.height = '50px';
scrollDiv.style.overflow = 'scroll';
document.body.appendChild(scrollDiv);
const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
}
export function setScrollbarWidth(padding) {
document.body.style.paddingRight = padding > 0 ? `${padding}px` : null;
}
export function isBodyOverflowing() {
return document.body.clientWidth < window.innerWidth;
}
export function getOriginalBodyPadding() {
return parseInt(
window.getComputedStyle(document.body, null).getPropertyValue('padding-right') || 0,
10
);
}
export function conditionallyUpdateScrollbar() {
const scrollbarWidth = getScrollbarWidth();
// https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.4/js/src/modal.js#L420
const fixedContent = document.querySelectorAll('.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed')[0];
const bodyPadding = fixedContent ? parseInt(
fixedContent.style.paddingRight || 0,
10
) : 0;
if (isBodyOverflowing()) {
setScrollbarWidth(bodyPadding + scrollbarWidth);
}
}