1. offsetWidth에서 clientWidth를 뺍니다. 

clientWidth 속성은 스크롤 막대가 없는 너비를 나타냅니다. 반면에 offsetWidth에는 스크롤 막대가 포함되어 있습니다. 다음은 스크롤 막대의 너비를 결정하는 간단한 계산입니다.

https://htmldom.dev/calculate-the-size-of-scrollbar 

const scrollbarWidth = document.body.offsetWidth - document.body.clientWidth;

2. 가짜 요소를 사용 

우리는 두 개의 가짜 div 요소를 만듭니다. 하나는 다른 하나의 자식입니다. 그런 다음 너비의 차이를 계산하십시오.

const calculateScrollbarWidth = function() {
    // Create the parent element
    const outer = document.createElement('div');
    outer.style.visibility = 'hidden';
    outer.style.overflow = 'scroll';
    
    // Append it to `body`
    document.body.appendChild(outer);

    // Create the children element
    const inner = document.createElement('div');
    outer.appendChild(inner);

    // Calculate the difference between their widths
    const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;

    // Remove the parent element
    document.body.removeChild(outer);

    return scrollbarWidth;
};

스크롤 막대 표시 옵션이 마우스 나 트랙 패드를 기준으로 자동으로 또는 스크롤 할 때 이 옵션은 macOS에서 작동하지 않습니다.