我有一些代码假定 OS X 的垂直滚动条宽度为 15px 并相应地进行一些布局。
这适用于 Mac。然而,在 Macbook 上,Chrome 的滚动条似乎并没有占用任何额外的空间。它显示为页面内容上的叠加层。这导致布局有点扭曲。
有什么方法可以检测滚动条是否为跨 Apple 台式机/笔记本电脑的 Chrome 保留了空间?
最佳答案
您可以使用来自 here: 的代码
首先在样式表中定义一些样式指南:
/* 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);
关于html - 如何检测滚动条是否占用 Chrome for OS X 中的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31603301/