当滚动条出现时,防止居中布局移动其位置

Question

我的页面布局看起来像这样:

<style type="text/css">
#content-wrap
{
    margin: 0 auto;
    width: 800px;
}
</style>

<div id="content-wrap">
</div>

您会注意到,当垂直滚动条出现时,content-wrap div会将其位置移动一点.一种情况是当浏览器开始逐步渲染页面而不显示垂直滚动条时,则确定需要滚动条,因为内容高于"折叠".这将div向左移动约10px.

在不强制浏览器始终显示滚动条的情况下,解决此问题的最佳方法是什么？

Answer 1

我担心解决这个问题的最佳方法是强制滚动条始终可见html {overflow-y: scroll;}.您遇到的问题是,当滚动条出现时,"可用区域"会缩小,例如10 px.这会导致左侧的计算边距缩小为滚动条宽度的一半,从而将居中内容稍微向左移动.

一个可能的解决方案可能是使用JavaScript而不是使用来计算边距,margin: 0 auto;并在滚动条出现时以某种方式补偿"丢失"像素,但我担心它会很混乱,而且当你在内容时内容可能会移动一点点计算并应用新的保证金.

Answer 2

If your site is "responsive" (reacts to width):

Step 1: Add width: 100vw to a wrapper div. This makes it as wide as the viewport, ignoring the appearance of a scrollbar.

第2步：添加overflow-x: hidden到正文。这将删除水平滚动条（在出现垂直滚动条时创建，以允许用户“在下面看”）。

“包装器div”是指您周围的另一个div#content-wrap

经过测试也将适用于您的情况：

<style type="text/css">
body {
    overflow-x: hidden;
}
#wrap-wrap {
    width: 100vw;
}
#content-wrap
{
    margin: 0 auto;
    width: 800px;
}
</style>
<div id="wrap-wrap">
    <div id="content-wrap">
    </div>
</div>

确保页面上没有什么东西足够宽，不会被滚动条夹住。

如果您的网站是固定宽度+居中（您的情况）：

<style type="text/css">
body {
    overflow-x: hidden;
}
#wrap-wrap {
    width: 100vw;
}
#content-wrap
{
    margin: 0 auto;
    width: 800px;
}
</style>
<div id="wrap-wrap">
    <div id="content-wrap">
    </div>
</div>

这将在滚动条出现时在宽度上添加一个宽度相等的左边界。否则为0。从这里拍摄，但经过测试。

Answer 3

您必须使用：

html {
  overflow-y: overlay;
}

仅支持 WebKit (Safari) 或 Blink (Chrome, Opera)