我有:我有几个网页都有这个大纲:
<body>
<div id="container">
CONTENT
</div>
</body>
使用 CSS:
body{
color:#000000;
background-color:#FFFFFF;
background-image: url(background.jpg);
background-repeat: repeat-x;
font-family: verdana;
letter-spacing: 1px;
}
#container{
margin-left:auto;
margin-right:auto;
margin-top:5px;
width: 700px;
}
问题:所有页面都很短，因此没有滚动条显示，但有一个页面较长，因此右侧出现垂直滚动条。第二页导致容器稍微移动(向左)。
据我所知，一个常见的解决方案是让滚动条显示在所有页面上，但我真的想避免这种情况，因为它只是许多页面中的一页。
问题:有没有一种方法可以避免移动容器，同时保持其居中而不使滚动条显示在所有页面上？
最佳答案
拥有大显示器的人永远不会在任何页面上看到滚动条。
使用小显示器的人总是会在所有页面上看到滚动条。
尽管显示器大小不同，但人们可以自由地将任何浏览器窗口设置为任意大小并导致滚动条。
哦，别忘了人们喜欢添加十几个浏览器工具栏插件，使浏览器窗口的内容区域只有原来的一半高。
事情就是这样，没有静态解决方案可以解决这个问题。由于上述原因，更改一页的边距不是解决方案。
如果您坚持要修复人们已经习惯的东西，那么它必须是一个“动态”JavaScript 解决方案，您可以在其中计算左边距并添加滚动条的宽度。对于不同的浏览器，条形有不同的宽度，所以你也必须计算它。
编辑:就像有人在另一个答案中所说的那样，这是浏览器的默认行为，应该保持不变。
Edit2:正如用户 dampe 在评论中所说，每次用户调整窗口大小时，您还必须触发 JavaScript。
这将是对您时间的巨大浪费。通常，浏览器的默认行为留给浏览器。需要考虑的变量太多，如果您没有对每个场景、皮肤、操作系统、浏览器版本、浏览器品牌、工具栏附加组件、显示器类型、尺寸等进行测试，那么您一定会错过一些东西.一旦你开始让它工作，你会发现你需要为 Explorer 做异常(exception)和更正。在不知不觉中，您最终会出现巨大的肿胀……这是为了什么？这有什么值(value)？
起点:100% 保证所有浏览器和情况下的预期行为。
终点:保证仅在您的显示器/系统中看起来很棒......您冒着在您甚至没有考虑过的系统/场景中看起来像垃圾的风险。
首先搜索预制的 JavaScript 解决方案或 jQuery 插件...如果找不到，问问自己为什么？
- 不实用
- 不可能
- 不值得麻烦(低需求)
Edit3: 我做了一些搜索来满足我的好奇心。我找到了一个带有 jQuery 解决方案的线程以及指向计算滚动条宽度的方法的链接。
恕我直言，这是浪费时间和资源，但这里是任何感兴趣的人的链接...
http://expressionengine.com/archived_forums/viewthread/158703/
Edit4:这是我找到的一个 CSS 解决方案。我没有对此进行测试，但如果它有效，那就太棒了。
html {
overflow-y: scroll;
}
http://haslayout.net/css-tuts/Fixing-Page-Shift-Problem
Edit5: CSS 解决方案有效但我不喜欢。它为每个页面创建滚动条，但在不需要时它们会变灰或为空……不优雅。
关于javascript - 滚动条移动内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5605667/