2019-01-24 05:51:11 -06:00
|
|
|
|
// Slightly modified, but without dependancies:
|
|
|
|
|
// https://raw.githubusercontent.com/malte-wessel/react-custom-scrollbars/master/src/utils/getScrollbarWidth.js
|
2019-01-23 07:57:19 -06:00
|
|
|
|
let scrollbarWidth = null;
|
|
|
|
|
|
|
|
|
|
export default function getScrollbarWidth() {
|
|
|
|
|
if (scrollbarWidth !== null) {
|
|
|
|
|
return scrollbarWidth;
|
|
|
|
|
}
|
2019-01-23 08:00:07 -06:00
|
|
|
|
|
2019-01-23 07:57:19 -06:00
|
|
|
|
if (typeof document !== 'undefined') {
|
|
|
|
|
const div = document.createElement('div');
|
|
|
|
|
const newStyles = {
|
|
|
|
|
width: '100px',
|
|
|
|
|
height: '100px',
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
top: '-9999px',
|
|
|
|
|
overflow: 'scroll',
|
2019-02-13 04:14:53 -06:00
|
|
|
|
MsOverflowStyle: 'scrollbar',
|
2019-01-23 07:57:19 -06:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
Object.keys(newStyles).map(style => {
|
|
|
|
|
div.style[style] = newStyles[style];
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.body.appendChild(div);
|
2019-02-13 04:14:53 -06:00
|
|
|
|
scrollbarWidth = div.offsetWidth - div.clientWidth;
|
2019-01-23 07:57:19 -06:00
|
|
|
|
document.body.removeChild(div);
|
|
|
|
|
} else {
|
|
|
|
|
scrollbarWidth = 0;
|
|
|
|
|
}
|
|
|
|
|
return scrollbarWidth || 0;
|
|
|
|
|
}
|
|
|
|
|
|
2019-01-23 08:00:07 -06:00
|
|
|
|
const hasNoOverlayScrollbars = getScrollbarWidth() > 0;
|
2019-01-23 07:57:19 -06:00
|
|
|
|
|
|
|
|
|
export const addClassIfNoOverlayScrollbar = (classname: string, htmlElement: HTMLElement = document.body) => {
|
|
|
|
|
if (hasNoOverlayScrollbars) {
|
|
|
|
|
htmlElement.classList.add(classname);
|
|
|
|
|
}
|
|
|
|
|
};
|