如何将包装器中心划分并补偿滚动条？

Question

我找不到任何真正的答案。迫使滚动条始终存在，这是一个不可接受的解决方案，IMO。当您将包装器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