Question

我的页面布局看起来something like this：

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

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

您会注意到，当垂直滚动条出现时，内容换行div会稍微改变其位置。一种情况是当浏览器开始逐步渲染页面而不显示垂直滚动条时，则确定需要滚动条，因为内容高于“折叠”。这将div向左移动约10px。

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

Answer 1

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

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

Answer 2

使用jquery并将其放在标记的开头：

<script type="text/javascript">
function checkheight(){
 if ($(document).height() > $(window).height()) {
 //that is if there is vertical scrollbar
 document.getElementById('yourcenteredcontainer').style.paddingLeft='8px'; 
 //8px because the scrollbars are (?always?) 16px
 }else{
 document.getElementById('yourcenteredcontainer').style.paddingLeft='0px';
 }
}
</script>

并调用函数checkheight（）;标签的最后加上，只要您有点击（或其他）事件，使页面的长度更长或更短。

Answer 3

如果您的网站是＆＃34;响应＆＃34; （对宽度做出反应）：

第1步：将width: 100vw添加到包装器div。这使得它与视口一样宽，忽略了滚动条的外观。

第2步：将overflow-x: hidden添加到正文中。这将删除水平滚动条（在显示垂直滚动条时创建，以允许用户＆＃34;查看＆＃34;它）。

＆＃34;包装div＆＃34;是指另一个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>

确保页面上的任何内容都不足以被滚动条抓住。

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

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

这将在滚动条出现时添加一个宽度等于滚动条的左边距。当它没有时，它是0。取自here，但经过测试。

Answer 4

您必须使用：

html {
  overflow-y: overlay;
}

仅受WebKit（Safari）或Blink（Chrome，Opera）支持

Answer 5

如果您可以使用Javascript，则可以将content-wrap的宽度设置为窗口的内部宽度减去滚动条的标准宽度。

但是你会遇到一些问题。

用户必须启用Javascript
您不知道垂直滚动条的宽度是多少，特别是如果滚动条不在那里！所以你必须猜测。 20px似乎是一个很好的猜测。
不同的浏览器有不同的方式告诉你想要窗口的内部宽度。

因此，如果你可以忍受所有这些，你可以做这样的事情（伪代码）

if window.innerWidth is defined :
   set the width of the div to window.innerWidth-20px
else if we're running on Internet Explorer :
   set the width to document.documentElement.offsetWidth-20px
otherwise :
   we're out of luck and we best leave the width as is.

Answer 6

首先，我建议优化HTML，以便加载/渲染时间不会太长。如果加载/渲染速度很快，滚动条将不会显得“太晚”。什么是加载/渲染需要很长时间？检查chrome调试工具中的网络选项卡（F12）。在Chrome调试工具中进行审核。

有许多内容可以使文档“reflow”，并且即使浏览器从一开始就知道必要的测量结果，也会出现滚动条。您是否使用表格进行布局 - 不要！他们可能需要多次渲染。你有没有指定宽度/高度的图像吗？然后，每个图像加载时都需要重新渲染文档。指定<img ... style="width: ..px; height: ..px">。是CSS sane and efficient吗？

如果无法降低加载/渲染速度，我认为最好的办法是在启用javascript时不使用浏览器的滚动条。这样你就可以控制它并将它放置在绝对位置，这样就不会影响水平定位。

让您的滑块以display: none开头。监视dom ready事件以及图像加载事件以及窗口调整大小事件。加载页面后，图像已加载，当窗口调整大小时，每次都运行相同的功能。它将确定是否需要滚动条并显示或隐藏它。

例如，您可以使用JQuery UI Slider并将其maxValue设置为$(document).height() - $(window).height()，监控滑块更改事件，然后将正文滚动到滑块的值，依此类推。

如果禁用了javascript，则后备将成为常规滚动条，然后您无法对轻微的水平移动做任何事情。

但实际上我认为水平移位的问题太小而无法花时间修复自定义滚动条，并检查它是否在所有平台上都能正常工作等。首先进行HTML / CSS优化。

Answer 7

您可以试试这个解决方案：https://stackoverflow.com/a/67213174/14302216

但是宽度不能是相对的。可能 width:100vw 将适用于父级，但我不确定您将如何设置子级宽度。恐怕calc(100vw-16px) 不起作用。但是如果你可以为孩子设置widht:800px，那就没问题了！

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

7 个答案:

如果您的网站是＆＃34;响应＆＃34; （对宽度做出反应）：

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