回到课程

怎样计算滚动条宽度?

重要程度: 3

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

对于Windows,它通常在 12px20px 之间变化。如果浏览器不为它保留任何空间,那么它可能是 0px

P.S. 代码应该适用于任何HTML文档,且不依赖于它的内容元素。

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

然后,它的完全宽度 offsetWidth 和内容宽度 clientWidth 之间的差就是滚动条的宽度:

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

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

// 必须添加到文档中,否则尺寸为 0
document.body.append(div);
let scrollWidth = div.offsetWidth - div.clientWidth;

div.remove();

alert(scrollWidth);