計算滾動條的寬度--js

原理

1. 創建兩個div嵌套在一起
2. 外層的div設置固定寬度和overflow：scroll
3. 滾動條的寬度=外層div的offsetWidth-內層div的offsetWidth

實現代碼

/**
 * 獲取滾動條的寬度
 */
getScrollWidth() {
    const scroll = document.createElement("div");
    const scrollIn = document.createElement("div");
    scroll.appendChild(scrollIn);
    scroll.style.width = "100px";
    scroll.style.height = "50px";
    scroll.style.overflow = "scroll";
    scroll.style.marginLeft = "-100000px";
    document.body.appendChild(scroll);
    const scrollInWidth = scrollIn.offsetWidth;
    const scrollWidth = scroll.offsetWidth;
    const tmp = setTimeout(() => {
        document.body.removeChild(scroll);
        clearTimeout(tmp);
    }, 10);
    return scrollWidth - scrollInWidth;
}