回到课程

滚动条的宽度是多少?

重要程度: 3

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

对于 Windows,它通常在 12px20px 之间变化。如果浏览器没有为其保留任何空间(滚动条以半透明的形式处于文本上面,也是可能发生的),那么它可能是 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);