如何使用JavaScript获取滚动条宽度（在最新版Chrome中）

Question

我想使用JavaScript查找滚动条宽度并将其用于CSS。我尝试了这个方法：

document.documentElement.style.setProperty('--scrollbar-width', (document.offsetWidth - document.clientWidth) + "px");

但我没有成功。我正在使用Chrome 86。

- Mart Jaegers

---

请看这里的这个Q。 - KcH

Answer 1

你可以对其进行样式设置，但是在大多数旧版浏览器上并不被广泛支持，需要考虑这一点。要获取宽度，你可以采取许多方法之一，例如可以使用以下代码：

const scrollWidth = document.querySelect('.your-element-class').offsetWidth - document.querySelector('.your-element-class').clientWidth;

由于 offsetWidth 包括滚动条宽度而 clientWidth 不包括滚动条宽度

- Breezer