返回课程

滚动条宽度是多少?

重要性:3

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

对于 Windows,它通常在 12px20px 之间变化。如果浏览器没有为它保留任何空间(滚动条半透明地覆盖文本,也会发生这种情况),那么它可能是 0px

附注:代码应该适用于任何 HTML 文档,不要依赖于其内容。

要获取滚动条宽度,我们可以创建一个带有滚动的元素,但没有边框和填充。

然后,它的总宽度 offsetWidth 和内部内容区域宽度 clientWidth 之间的差值将正好是滚动条。

// create a div with the scroll
let div = document.createElement('div');

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

// must put it in the document, otherwise sizes will be 0
document.body.append(div);
let scrollWidth = div.offsetWidth - div.clientWidth;

div.remove();

alert(scrollWidth);