2019-09-29 22:30:58 +10:00
|
|
|
import { isMobile } from '../is_mobile';
|
|
|
|
|
2023-11-29 04:47:55 +11:00
|
|
|
let cachedScrollbarWidth: number | null = null;
|
2019-09-29 22:30:58 +10:00
|
|
|
|
|
|
|
const getActualScrollbarWidth = () => {
|
|
|
|
const outer = document.createElement('div');
|
|
|
|
outer.style.visibility = 'hidden';
|
|
|
|
outer.style.overflow = 'scroll';
|
|
|
|
document.body.appendChild(outer);
|
|
|
|
|
|
|
|
const inner = document.createElement('div');
|
|
|
|
outer.appendChild(inner);
|
|
|
|
|
|
|
|
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
|
2023-11-29 04:47:55 +11:00
|
|
|
outer.remove();
|
2019-09-29 22:30:58 +10:00
|
|
|
|
|
|
|
return scrollbarWidth;
|
|
|
|
};
|
|
|
|
|
|
|
|
export const getScrollbarWidth = () => {
|
|
|
|
if (cachedScrollbarWidth !== null) {
|
|
|
|
return cachedScrollbarWidth;
|
|
|
|
}
|
|
|
|
|
2023-11-29 04:47:55 +11:00
|
|
|
const scrollbarWidth = isMobile(window.innerWidth)
|
|
|
|
? 0
|
|
|
|
: getActualScrollbarWidth();
|
2019-09-29 22:30:58 +10:00
|
|
|
cachedScrollbarWidth = scrollbarWidth;
|
|
|
|
|
|
|
|
return scrollbarWidth;
|
|
|
|
};
|