如何检测滚动条是否占用 OS X Chrome 中的空间？

Question

我有一些代码假设 OS X 的垂直滚动条宽度为 15px，并相应地进行一些布局。

这适用于 Mac。然而，在 Macbook 上，Chrome 的滚动条似乎并没有占用任何额外的空间。它显示为页面内容上的覆盖层。这会导致布局有点扭曲。

有什么方法可以检测滚动条是否为 Apple 台式机/笔记本电脑上的 Chrome 保留了空间？

Answer 1

您可以从这里使用此代码：

首先，在样式表中定义一些样式指南：

/* way the hell off screen */
.scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

与你的 javascript 相比，你是这样开始的：

// 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.warn(scrollbarWidth); // Mac:  15

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