java滚动条粗细_获取浏览器原生滚动条宽度的方法

整体思路就是往body中插入一个div，div中再嵌套一个div，设置外部的div的overflower为scroll，

这样就可以出现滚动条轨道，然后使用外部div宽度值减去内部div的宽度值即可了 。

得到滚动条宽度之后记得把添加的元素删掉。

详细如下代码

const getScrollBarWidth = () => {

const outer = document.createElement("div");

outer.style.visibility = "hidden";

outer.style.width = "100px";

outer.style.position = "absolute";

outer.style.top = "-9999px";

document.body.appendChild(outer);

//

const widthNoScroll = outer.offsetWidth;

outer.style.overflow = "scroll";

const inner = document.createElement("div");

inner.style.width = "100%";

outer.appendChild(inner);

//

const widthWithScroll = inner.offsetWidth;

outer.parentNode.removeChild(outer);

scrollBarWidth = widthNoScroll - widthWithScroll;

return scrollBarWidth;

};