js 怎么获取滚动条自身的宽度

获取滚动条自身宽度的一个常见方法是通过创建一个具有滚动条的隐藏元素，并测量其尺寸差异。以下是一个简单的示例代码，演示了如何在 JavaScript 中实现这一操作：

function getScrollbarWidth() {
    // 创建一个具有滚动条的隐藏div
    var div = document.createElement('div');
    div.style.overflow = 'scroll'; // 强制出现滚动条
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.position = 'absolute';
    div.style.top = '-9999px'; // 确保不影响页面布局
    document.body.appendChild(div); // 添加到DOM中

    // 计算滚动条的宽度：div的总宽度减去其内部宽度（可视宽度）
    var scrollbarWidth = div.offsetWidth - div.clientWidth;

    // 清理：从DOM中移除这个临时div
    document.body.removeChild(div);

    return scrollbarWidth;
}

// 调用函数并打印滚动条宽度
console.log(getScrollbarWidth());
复制

这段代码首先创建了一个隐藏的 <div>，设置了使其出现滚动条的样式，并将其添加到页面中一个不可见的位置。然后，通过比较该 <div> 的 offsetWidth（包括滚动条的总宽度）和 clientWidth（不包括滚动条的内部宽度），我们可以计算出滚动条的宽度。最后，这个临时的 <div> 会被从 DOM 中移除。