jquery - CSS(或 jQuery): How to set horizontal scrollbar in the middle position?

Question

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

内容位于屏幕中央。

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

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

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

问题:如果我最初在大分辨率屏幕(或更宽的窗口)中打开网站，然后缩小浏览器窗口，滚动条就会出现在它应该出现的位置。但是 - 如果我继续缩小窗口，滚动条 handle 将停留在左侧，并且无法进一步向左滚动。此外，如果浏览器窗口最初小于内容，则滚动条一直显示到左侧，我无法向左滚动更多以显示隐藏内容的左侧。

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

非常感谢您的建议!

Answer 1

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

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

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

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

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

然后您可以将 wrapper 的宽度调整为 Content + (2 * Menu)，并给它 margin: 0 auto;

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

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