CSS（或jQuery）：如何在中间位置设置水平滚动条？答案

【问题标题】：CSS (or jQuery): How to set horizontal scrollbar in the middle position?CSS（或jQuery）：如何在中间位置设置水平滚动条？
【发布时间】：2011-07-19 20:55:51
【问题描述】：

我在一个网站上工作，该网站的主要内容块太宽而无法完全容纳在较小的分辨率屏幕中。

内容位于屏幕中间。

当内容不适合屏幕时，我需要一个水平滚动条出现。

我强制水平滚动条与 div 一起出现：

<div id="stretcher" style="width:1200px; min-width:1200px; height:1px; position:absolute; margin:0 auto"></div>

问题：如果我最初在大分辨率屏幕（或更宽的窗口）中打开网站，然后将浏览器窗口变窄，滚动条就会出现在它应该出现的位置。但是 - 如果我继续使窗口变窄，滚动条句柄将停留在左侧，并且进一步向左滚动变得不可能。另外，如果浏览器窗口最初小于内容，滚动条会一直显示到左侧，我无法向左滚动更多以显示隐藏内容的左侧。

问题：如何强制滚动条到中间，这样我可以向左滚动显示隐藏的部分内容？

非常感谢您的建议！

【问题讨论】：

你能提供截图吗？我看不懂你的意思。
乔丹，你能访问这个网站吗？
哦，我明白你的意思了。屏幕的左侧被右侧的内容推离屏幕左侧。
是的。并且滚动条停留在左侧，无法再向左滚动以显示隐藏的内容。
我是否更正了主要内容区域应该水平居中，并且菜单应该悬在左边缘？

标签： jquery css scrollbar horizontal-scrolling

【解决方案1】：

我的演示的 JSFiddle：http://jsfiddle.net/Y9DCs/

据我所知，现在您有一个 2 列布局：

左侧是包含菜单的“访问”面板。右侧是您的主要内容区域。

我认为拥有一个包含 3 个部分的主容器可能会更好：

|----------------wrapper---------------------|
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|  Menu   |       Content        |   Dummy   |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|--------------------------------------------|

然后您可以将包装器的宽度设置为 Content + (2 * Menu)，并将其设置为 margin: 0 auto;

Menu 和 Dummy 的宽度相同，但 dummy 只是一个没有内容的 div。

这将有效地调整整个区域的大小，使其以屏幕为中心，菜单似乎挂在内容的左侧。

【讨论】：

这是一个有趣的想法。谢谢你，乔丹！让我试试。实际上在我的布局中，菜单不在包装器内。此外，担架 div 的宽度包括“虚拟”的附加宽度，并且担架设置为居中，边距：0 自动。你认为如果我在右侧创建额外的虚拟 div 会改善这种情况吗？
试过了。没运气。希望您能提供更多想法。
是的，我看到您的菜单不在包装器中，但应该在。我认为您也可以取消担架 div 的想法。让我做一个 jsFiddle，看看它是否适合你。
@Dimitri 我添加了一个 jsFiddle，您可以使用它。当我拉伸和折叠屏幕时，它会向左对齐，因此滚动条允许您正确滚动它。我猜您将需要删除任何无关的元素，例如您的担架等，以及当前应用于您的布局的所有定位/左侧/顶部等。
这看起来很棒，乔丹。我实际上尝试过，出于某种原因，对你有用的东西对我不起作用。让我再试一次，更密切地关注您的 jsFiddle 代码。

【解决方案2】：

经过一天的反复试验，我找到了自己的解决方案，这在很大程度上受到了 Jordan 在回答我的问题时提出的建议的启发。尽管我的解决方案与乔丹提供的不同，但我应该归功于他，因为他让我朝着正确的方向思考。

一般来说，我尽量小心人们对大幅重新排列 CSS 的建议。在这种特殊情况下，这是毫无疑问的，因为我的网站布局比 Jordan 的 jsFiddle 示例更复杂，并且 jQuery 动画效果的种类只有在我使用的那种定位下才有可能。

我的“管道胶带”解决方案涉及将主块的每个元素包装在其自己的单独包装器中，以 margin:0 auto 为中心。这样我就不需要将#access div 放在#wrapper div 中（这是最大的挑战，因为它破坏了动画。）

我的解决方案也不涉及创建三列布局（由 Jordan 提出）或“虚拟”div。事实证明这是不必要的，因为我只对显示网站左侧（菜单）感兴趣。

不过，我想再次强调，如果不与乔丹沟通，我将无法解决这个问题。这就是为什么我将乔丹的回答标记为“接受”。

非常感谢你，乔丹！

【讨论】：

【解决方案3】：

您只需将所有内容包装在一个名为 main_wrapper 或其他内容的 div 中，然后将其设置为 padding-left: 20px 或任何您喜欢的内容

【讨论】：

谢谢你，卢克。我试过了。不幸的是，它对水平滚动条的位置没有影响。
但这不是让您看到从左侧开始的所有内容，滚动条在左侧。您可以看到除整个右侧之外的所有内容，但您可以滚动到它。也许我错了
问题是，如果浏览器窗口足够窄，滚动条从左边开始，但部分站点更靠左，没有滚动的地方。这正是我要解决的问题。希望您能提供更多想法。