Question

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

我不知道自己是否清楚了。

让我们说这是一个网页：

这就是滚动条的外观：

但我希望有这样的事情：

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

Answer 1

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

Answer 2

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

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>

Answer 3

我有同样的问题，只有使用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);
    }
});

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

Answer 4

根据浏览器的不同，以下内容不受支持 MDN docs，但我认为你可能觉得它很有趣。

overflow-y: overlay;

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

看起来这个属性并不受欢迎，现在支持它的浏览器也计划放弃对它的支持。我不明白为什么，因为它肯定有它的用途。

Answer 5

您可以检查屏幕是否有滚动条。如果为真，你可以将内容保留在右边，也许这个链接可以帮助你：Detect if a page has a vertical scrollbar?

Answer 6

overflow-x: hidden;

在正文CSS代码中，已帮助Alot！ 该死的，花了我45分钟的时间来寻找一个简单的答案。

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

滚动条调整页面大小

6 个答案: