javascript - 如何使包装 Div 居中并补偿滚动条？

Question

我没有找到任何真正的答案。在我看来，强制滚动条始终存在并不是一个可接受的解决方案。当您将包装器 div 居中并自动设置边距时，当滚动条出现时如何进行补偿？

谢谢

Answer 1

您需要比较 viewport高度到document高度。如果viewport < document然后滚动条可见，您需要调整集中代码以允许 ~20px 滚动条。

var viewportHeight = $(window).height();
var documentHeight = $(document).height();

if (viewportHeight < documentHeight ) {
    alert("Vertical scrollbar visible");
    // adjust container centralisation to account for scrollbar
}
else {
    alert("Vertical scrollbar not visible");
}    

您需要将其放入 $(window).resize(fn); 上调用的函数中以便在调整浏览器窗口大小时它会更新。

Example fiddle