html - 滚动条调整页面大小

Question

假设我有一个静态网页并且整个页面被包裹，假设在 700px 的宽度内，现在如果页面的内容太长，那么（显然）会出现一个滚动条。但是滚动条的外观将所有内容都向左移动了几个像素（这些像素需要适合页面右侧的滚动条）。我想做的是删除这种“移动”效果，这样如果需要滚动条，这不会以任何方式影响页面的内容。

我不知道我是否说清楚了。

假设这是一个网页：

这就是滚动条的外观：

但我想要这样的东西：

点代表空白，内容代表网页内容，右边的列代表滚动条。

score 10 · Accepted Answer

您可以overflow-y: scroll为您的身体设置规则。这将始终显示一个禁用的垂直滚动条，除非内容足够长可以滚动。这样，当内容足够长以至于您可以实际滚动并且不需要脚本来完成这项工作时，内容就不会向左移动。

score 4 · Accepted Answer

如果你根本不需要滚动条，你可以使用这个：

body {
    overflow-y: hidden;
}

UPD。因此，如果您需要滚动条来滚动内容，但又想隐藏它，可以使用以下方法（dabblet.com 上的演示）：

CSS：

body {
    overflow: hidden;
}

#fake_body {
    position: absolute;
    left: 0;
    top: 0;
    right: -32px;
    bottom: 0;
    overflow-y: scroll;
}

html:

<div id="fake_body">
    <ul>
        <li>content content content #01</li>
        <li>content content content #02</li>
        <li>content content content #03</li>
        …
        <li>content content content #55</li>
    </ul>
</div>

score 4 · Accepted Answer

根据 MDN 文档，以下内容在浏览器中不受很好的支持，但是我认为您可能会觉得它很有趣。

overflow-y: overlay;

在支持该属性的浏览器（例如 Google Chrome）中，这会将滚动条放在您的内容之上，而不是在需要滚动条时将您的内容转移。然后，您可以添加足够数量的填充，以便您的内容永远不会被它覆盖。

似乎这个属性并不流行，甚至现在支持它的浏览器也计划放弃对它的支持。我不明白为什么，因为它肯定有它的用途。

score 2 · Accepted Answer

我有同样的问题，只有使用 JS/jQuery 的解决方案对我来说已经足够好了。

我使用链接来检测页面是否有垂直滚动条？之前和那些链接提供：http://davidwalsh.name/detect-scrollbar-width，http://api.jquery.com/css/#css2，居中位置：固定元素用于生成以下代码。

CSS：

body {
    position: absolute;
    left: 50%;
    margin-left: -400px;
    width: 800px;
    height: 100%;
}

.scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

JS：

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($(document).height() > $(window).height()) {

        // Create the measurement node
        var scrollDiv = document.createElement("div");
        scrollDiv.className = "scrollbar-measure";
        document.body.appendChild(scrollDiv);
        // Get the scroll bar width
        var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
        // Delete the DIV
        document.body.removeChild(scrollDiv);

        // Change margin-left parameter for #container for preventing shift caused by scroll bar
        var current_margin_left_px = $("#container").offset().left;
        var current_margin_left = parseInt(current_margin_left_px, 10);
        var changed_margin_left = current_margin_left + scrollbarWidth/2 + "px";
        $("#container").css("margin-left", changed_margin_left);
    }
});

在灵活的身体宽度的情况下，必须添加更多代码。

score 0 · Accepted Answer

您可以检查屏幕是否有滚动条。如果为真，则您可以将内容保留在右侧，也许此链接将对您有所帮助：检测页面是否具有垂直滚动条？

score -1 · Accepted Answer

overflow-x: hidden;

在正文 CSS 代码中，帮助很大！ 该死的，我花了 45 分钟来浏览一个简单的答案。

什么地方出了错？...我有一个悬停=显示图像的事情。我正确调整了所有图像的大小；当我刷新页面时，滚动条有很大的播放空间！.....所以我在每个 div 标签中都放了一个 overflow-x（每个 div 标签分配给单个列表项），但什么也没发生！解决方案：代码是正确的，但需要放置在body标签本身中。不是单独的 div 标签。该死……谢谢z

html - 滚动条调整页面大小

6 回答 6

Related

Reference