获取滚动条宽度

Question

我去掉了body滚动条，然后必须用padding来弥补它的不足。为了做到这一点，我尝试计算去掉body滚动条后出现的div块的滚动条宽度，并将结果作为padding传递。这在Chrome浏览器中可行，但在其他浏览器中却不可行。这是我的代码。

element = document.getElementById('div');
var scrollBarWidth = element.offsetWidth - element.clientWidth;
  document.body.style.paddingRight = scrollBarWidth + 'px';

如果有合适的解决方案，我将非常感激。

Answer 1

这似乎是可行的，但也许有一个更简单的解决方案，可以在所有的浏览器中工作？

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

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

// Delete the DIV 
document.body.removeChild(scrollDiv);

.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}

document.body.style.paddingRight = (scrollbarWidth) + 'px';