滚动条调整页面大小答案

【问题标题】：Scrollbar resizing the page滚动条调整页面大小
【发布时间】：2012-05-20 17:36:32
【问题描述】：

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

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

假设这是一个网页：

这是滚动条的外观：

但我想要这样的东西：

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

【问题讨论】：

标签： html css web scrollbar

【解决方案1】：

以下内容在浏览器中不受支持，根据 MDN docs，不过我想你可能会觉得它很有趣。

overflow-y: overlay;

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

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

【讨论】：

确认这在 Chrome 中对我有用，而不是在 safari 中

【解决方案2】：

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

我使用之前提供的Detect if a page has a vertical scrollbar? 的链接以及这些链接：http://davidwalsh.name/detect-scrollbar-width、http://api.jquery.com/css/#css2、Center a position:fixed element 生成以下代码。

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);
    }
});

如果是灵活的主体宽度，则必须添加更多代码。

【讨论】：

小修正：如果您要使用像 malsup.com/jquery/cycle 这样的幻灯片，它会向您的页面添加内容，但不要显示所有内容，请不要忘记添加“显示：无”将 css 格式转换为幻灯片 div。

【解决方案3】：

overflow-x: hidden;

在正文 CSS 代码中，HELPED AlOT！ 该死，我花了 45 分钟浏览了一个简单的答案。

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

【讨论】：

【解决方案4】：

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

【讨论】：

这工作正常，我不想烦人，但如果我根本不需要滚动条，我不想显示空滚动条怎么办。您提出的解决方案只是保留一个滚动条：如果不需要，则为空，如果需要，则可用。我更希望有一个不移动内容或根本没有滚动条的滚动条。没有脚本可以吗？
据我所知，如果没有脚本，这是无法实现的。
@G4bri3l 我发布了我的答案，告诉你根本没有滚动条
感谢您的回答；）@matmuchrapna 您的回答只是让我隐藏了滚动条，但这不是我需要的。我有很多内容，所以我需要一个滚动条。
对于在 2019 年遇到此问题的任何人，有一种更优雅的方法可以完成此操作，并且当没有可滚动的内容时它不会留下禁用的滚动条。如下： html { margin-left: calc(100vw - 100%); }

【解决方案5】：

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

body {
    overflow-y: hidden;
}

UPD.所以如果你需要滚动条来滚动内容，但又想隐藏它，你可以使用following method (demo on 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>

【讨论】：

他想让滚动条可见，当有东西要滚动时。
尽管这并没有真正回答他的问题，但它仍然很好:)
效果很好。我将它与stackoverflow.com/a/13382873/3994485 结合使用以获得滚动条的确切大小并将其重新定位到视口之外，而不改变视口的尺寸。 var scrollwidth = "-"+getScrollbarWidth().toString()+"px"; $(".scrollposition").css("right", scrollwidth);

【解决方案6】：

您可以检查屏幕是否有滚动条。如果属实，则您可以将内容保留在右侧，也许此链接会对您有所帮助：Detect if a page has a vertical scrollbar?

【讨论】：

感谢您的回答，但我不想为此使用任何 sript 语言；)