滚动条宽度是多少?
重要性:3
编写代码以返回标准滚动条的宽度。
对于 Windows,它通常在 12px
和 20px
之间变化。如果浏览器没有为它保留任何空间(滚动条半透明地覆盖文本,也会发生这种情况),那么它可能是 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);