jquery滚动条宽度

// 获取滚动条宽度
function getScrollbarWidth() {
    // 创建一个 div 元素
    var scrollDiv = document.createElement("div");
    scrollDiv.style.cssText = "width: 100px; height: 100px; overflow: scroll; position: absolute; top: -9999px;";
    document.body.appendChild(scrollDiv);
    // 获取滚动条宽度
    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
    // 移除临时创建的 div 元素
    document.body.removeChild(scrollDiv);
    return scrollbarWidth;
}

// 设置滚动条宽度（仅限 Webkit 内核浏览器）
function setScrollbarWidth(element, width) {
    element.style.setProperty('--scrollbar-width', width + 'px');
    element.style.setProperty('overflow', 'hidden');
    element.style.setProperty('width', 'calc(100% + ' + width + 'px)');
}

// 示例
var scrollbarWidth = getScrollbarWidth();
console.log("滚动条宽度: " + scrollbarWidth + "px");

// 设置滚动条宽度为 10px
setScrollbarWidth(document.body, 10);

/* 示例：使用 CSS 变量预留滚动条空间 */
.container {
    --scrollbar-width: 10px;
    width: calc(100% + var(--scrollbar-width));
    overflow: auto;
}