js 滚动条 宽度

function getScrollbarWidth() {
    // 创建一个临时元素
    const outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.overflow = "scroll"; 
    outer.style.msOverflowStyle = "scrollbar"; 
    document.body.appendChild(outer);

    const inner = document.createElement("div");
    outer.appendChild(inner); 

    const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);

    // 移除临时元素
    outer.parentNode.removeChild(outer); 

    return scrollbarWidth;
}

console.log(getScrollbarWidth()); // 输出滚动条宽度

/* 自定义垂直滚动条 */
::-webkit-scrollbar {
    width: 12px; /* 设置滚动条宽度 */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

::-webkit-scrollbar-thumb {
    background-color: #888; 
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555; 
}