javascript - 各浏览器滚动条默认宽度是多少？

Question

现在各大浏览器滚动条的默认宽度是多少呢？有没有什么接口可以快速获取其宽度呢？

Answer 1

我记得也是17px

window.innerWidth - document.body.clientWidth //火狐下17px IE11下17px

chrome的滚动条 我给关了 所以没测试
window.innerWidth 浏览器可用宽度
document.body.clientWidth body的宽度
我这个式子是在body没有margin、padding、border的情况下得到的
如果你要是有的话可以做减法

//margin
document.body.style.marginLeft 
document.body.style.marginRight
//padding
document.body.style.paddingLeft
document.body.style.paddingRight
//border
document.body.style.borderLeft
document.body.style.borderRight

另外科普一下:
screen.width屏幕分辨率宽度
document.body.scrollWidth 页面完整宽度
document.body.scrollHeight 页面完整宽度
document.body.offsetWidth 网页课件区域宽度
document.body.offsetHeight 网页课件区域高度

Answer 2

用兩層 p
外層先設定 overflow: scroll，量取內層 p 寬度
再將外層 p 設定 overflow: hidden，再量內層 p 寬度

兩個寬度差就是 scrollbar 的寬度

https://jsfiddle.net/fdamw8sb/

---

或是直接用 offsetWidth 跟 clientWidth 的差值也能算出來
ref: https://davidwalsh.name/detect-scrollbar-width

// Create the measurement node
var scrollp = document.createElement("p");
scrollp.style.overflow = 'scroll';
document.body.appendChild(scrollp);

// Get the scrollbar width
var scrollbarWidth = scrollp.offsetWidth - scrollp.clientWidth;
console.warn(scrollbarWidth); // Mac:  15

// Delete the p 
document.body.removeChild(scrollp);

Answer 3

默认滚动条不记在body中

Answer 4

在20px左右

Answer 5

我记得是17px

Answer 6

得自己量量,有时候更新一次版本换一次

Answer 7

var cWidth = document.body.clientWidth || document.documentElement.clientWidth;//页面可视区域宽度
var iWidth = window.innerWidth;//浏览器窗口大小
console.log(iWidth - cWidth);//打印滚动条宽度

Answer 8

在body无border-width的情况下
window.innerWidth - document.body.clientWidth