我们希望将这个开源项目提供给全世界的人。请帮助我们将教程的内容 翻译为你所掌握的语言 对应的版本。
è´­ä¹°EPUB/PDF
教程路线图
回到课程

滚动条的宽度是多少？

重要程度: 3

编写代码，返回标准滚动条宽度。

对于 Windows，它通常在 12px 和 20px 之间变化。如果浏览器没有为其保留任何空间（滚动条以半透明的形式处于文本上面，也是可能发生的），那么它可能是 0px。

P.S. 该代码应适用于任何 HTML 文档，而不依赖于其内容。

为了获得滚动条的宽度，我们可以创建一个带有滚动条的元素，但是没有边框（border）和内边距（padding）。

然后，它的全宽度 offsetWidth 和内部内容宽度 clientWidth 之间的差值就是滚动条的宽度：

// 创建一个包含滚动条的 div
let div = document.createElement('div');

div.style.overflowY = 'scroll';
div.style.width = '50px';
div.style.height = '50px';

// 必须将其放入文档（document）中，否则其大小将为 0
document.body.append(div);
let scrollWidth = div.offsetWidth - div.clientWidth;

div.remove();

alert(scrollWidth);