31 lines
951 B
JavaScript
31 lines
951 B
JavaScript
import { useEffect, useState } from 'react';
|
|
|
|
export const useScrollbarWidth = () => {
|
|
const [scrollbarWidth, setScrollbarWidth] = useState(0);
|
|
|
|
useEffect(() => {
|
|
// Create fake div to determine if scrollbar is rendered inside or outside
|
|
const div = document.createElement('div');
|
|
div.style.width = '100px';
|
|
div.style.height = '1px';
|
|
div.style.position = 'absolute';
|
|
div.style.left = '-9999em';
|
|
div.style.top = '-9999em';
|
|
div.style.overflow = 'auto';
|
|
div.setAttribute('aria-hidden', 'true');
|
|
const child = document.createElement('div');
|
|
child.textContent = 'This is a test div.';
|
|
div.appendChild(child);
|
|
document.body.appendChild(div);
|
|
const autoWidth = child.clientWidth;
|
|
div.style.overflow = 'hidden';
|
|
const hiddenWidth = child.clientWidth;
|
|
setScrollbarWidth(hiddenWidth - autoWidth);
|
|
div.remove();
|
|
}, []);
|
|
|
|
return scrollbarWidth;
|
|
};
|
|
|
|
export default useScrollbarWidth;
|