浏览器滚动条移位答案

【问题标题】：Browser Scrollbar shift浏览器滚动条移位
【发布时间】：2010-11-15 06:24:33
【问题描述】：

当您转到我的网站上包含额外内容的页面时，滚动条出现在右侧，但我的内容明显向左移动。您可以通过单击主页然后在我的网站 (www.ipalaces.org) 上再次托管并返回来注意到这一点

如何处理我页面上的浏览器滚动条？我可以做到至少让滚动条始终可见吗？

我的网站是www.ipalaces.org，请告诉我。

【问题讨论】：

对于那些试图复制的人，您可能需要将窗口缩小。
在 IE8 中对我来说很好。我们在这里谈论的是什么浏览器？
所有浏览器，我在我的 HDTV 上使用 1360 x 768 res，720P，所以也许你的分辨率更高，可以让你看到完整的内容，如果是这样，请尝试这里 ipalaces.org/hosting/domains.html 然后点击主页注意区别。
在下面查看我的答案，在 IE6、7、8、FF 和 Chrome 中测试。
我在一些使用 jquery 的隐藏 div 中发现了类似的问题，动画来回弹跳甚至更烦人。我正在研究一种使用带有 javascript 的窗口设置居中内容的 javascript 方法。

【解决方案1】：

嗯，这取决于浏览器。

body {

overflow-y: scroll;
overflow-x: scroll;
overflow: -moz-scrollbars-vertical;

}

应强制显示水平 (overflow-x) 和垂直滚动条 (overflow-y)。虽然我记得 Opera 有时会不遵守声明，除非它位于 <body>（div 等）内的元素上。

已编辑关于@wsanville 和@BHare 的评论。

【讨论】：

【解决方案2】：

我已经在 IE6、IE7、IE8、Firefox 3 和 Chrome 上进行了测试，让垂直滚动条始终可见的简单方法是：

html { overflow-y: scroll; }

【讨论】：

【解决方案3】：

让你的身体 101% 高...这将强制滚动条始终显示。

body {height:101%}

【讨论】：

这很好用，但随后会出现令人讨厌的 1 像素向下偏移。有没有办法让所有浏览器都显示滚动条，但如果不需要则禁用它。像-moz-scrollbars-vertical；但更普遍
html, 身体 { 高度: 100%; margin-bottom: 1px;} 似乎缩小了差距，但还是有一个恼人的差距。

【解决方案4】：

body {
   overflow: scroll;
}

即使是最新的 Firefox (3.5)，我也遇到了同样的问题。溢出功能救了我的命！

【讨论】：

【解决方案5】：

这似乎对我很有用...

html {
    overflow-y: scroll;
}

【讨论】：

【解决方案6】：

试一试...我知道它很难看，但它可能是唯一的方法。

#force_scroll { 
    width: 1em; 
    position: absolute; 
    top: 0; 
    bottom: -0.1px; 
    z-index: -1; 
}

然后在您的 HTML 中某处（最好在您的 </body> 之前）：

<div id="force_scroll"></div>

【讨论】：

-0.1px 不是有效的测量值。即便如此，使用 -1px 或 -0.1em 仍然会产生与 margin-bottom: 1px; 相同的效果。页面仍然可以向下滚动 1 个像素。
@Brian，查看编辑。最初 </body> 没有被转义/标记为代码。所以它没有在页面上呈现。我意识到这可能为时已晚，但没有用。