javascript - 在 webkit 浏览器中分别从 body 宽度和高度中减去 y-scrollbar 宽度和 x-scrollbar 高度

Question

我的网页有居中的页眉、内容和页脚 div，每个 div 的宽度都是 900 像素。

(关于页眉、内容和页脚，我能提供的唯一其他可能相关的信息是页眉具有固定定位，内容是相对定位的，页脚是绝对定位的。但是，我不确定这些信息是否会与解决方案相关。)

我正在使用以下 CSS 媒体查询:

/* If screen width is less than or equal to 900px (e.g.: tablet, mobile) ... */
@media only screen and (max-width: 900px) {
    /* Scale header, content and footer width */
    #header, #content, #footer { width: 100%; }
}

当页面宽度小于它们的默认宽度时，开始按页面缩小这些 div。我希望缩小比例在所有浏览器中都是无缝的，但是，我遇到了一个问题，因为 webkit 浏览器计算页面宽度中的 y 和 x 滚动条宽度。这使得滚动条以特定宽度覆盖 div，并使缩小发生较晚。

我想要一个 JQuery 解决方案来分别从 webkit 浏览器中的 CSS 主体宽度和高度中计算和减去 y 滚动条宽度和 x 滚动条高度，以说明 webkit 浏览器如何在宽度和高度中包含滚动条页面，以便我的 CSS 媒体查询重新缩放页面主体以适合查看区域，在所有浏览器中都可以正常工作。

我对替代解决方案不感兴趣，例如让滚动条始终存在，以使缩小在 webkit 浏览器中始终以相同的方式工作。

Answer 1

我建议使用 JavaScript 来检测您的 HTML 正文是否在水平和垂直方向上都大于窗口。如果它们超出窗口，则有一个滚动条。然后，您可以向主体添加填充以适应这一点。

我相信滚动条的宽度大约为 15 像素，但这应该很容易找到。

// Check if body height is higher than window height :)
if ($("body").height() > $(window).height()) {
    alert("Vertical Scrollbar! D:");
}

// Check if body width is higher than window width :)
if ($("body").width() > $(window).width()) {
    alert("Horizontal Scrollbar! D:<");
}

您可以使用上面的代码来检测这两个值。将这些放在监听器中以调整窗口大小将确保在必要时重新评估所有参数。

更新:

$(window).resize(function(){
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        $('body').css('padding-bottom', '15px');
    } else {
        $('body').css('padding-bottom', '0');
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        $('body').css('padding-right', '15px');
    } else {
        $('body').css('padding-right', '0');
    }
}

希望这有帮助:)

额外:

如果每个浏览器的滚动条尺寸不同，您可以简单地创建一个具有适合浏览器尺寸的 CSS 类并通过调用应用它:

$('body').addClass('<CLASSNAME>');

和

$('body').removeClass('<CLASSNAME>');

而不是设置和取消设置主体上的填充。