CSS（或jQuery）：如何将水平滚动条设置在中间位置？
我工作的网站的主要内容块太宽，无法完全适应较小分辨率的屏幕。
内容位于屏幕中央。
当内容不适合屏幕时，我需要出现水平滚动条。
我强制水平滚动条与 div 一起出现：
<div id="stretcher" style="width:1200px; min-width:1200px; height:1px; position:absolute; margin:0 auto"></div>
问题： 如果我最初在大分辨率屏幕（或更宽的窗口）中打开网站，然后使浏览器窗口变窄，则滚动条只会出现它应该在哪里。但是 - 如果我继续使窗口变窄，滚动条手柄将停留在左侧，并且不可能进一步向左滚动。另外，如果浏览器窗口最初小于内容，则滚动条会一直显示在左侧，并且我无法向左滚动更多以显示隐藏内容的左侧。
问题：如何强制滚动条到中间，以便我可以向左滚动以显示内容的隐藏部分？
我将感谢您的建议！
I work on a website whose main content block is too wide to fit fully inside the smaller resolution screens.
The content is centered in the middle of the screen.
I need a horizontal scrollbar to appear when the content doesn't fit inside the screen.
I force the horizontal scrollbar to appear with a div:
<div id="stretcher" style="width:1200px; min-width:1200px; height:1px; position:absolute; margin:0 auto"></div>
The problem: if I initially open the website in a large resolution screen (or wider window), and then make the browser window narrower, the scrollbar appears just where it's supposed to. However - if I continue making the window narrower, the scrollbar handle stays at the left side, and scrolling further to the left becomes impossible. Also, If the browser window is initially smaller than the content, the scrollbar appears all the way to the left, and I can't scroll more to the left to reveal the left side of the content that is hidden.
The question: how can I force the scroller to the middle, so that I can scroll left to reveal the hidden part of the content?
I would be grateful for your advice!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我的演示的 JSFiddle： http://jsfiddle.net/Y9DCs/
从我所看到的，现在你有 2 列布局：
左侧是包含菜单的“访问”面板。右侧是您的主要内容区域。
我认为您可能更适合拥有一个包含 3 个部分的主容器：
然后您可以将包装器的宽度调整为 Content + (2 * Menu)，并为其指定 margin: 0 auto;
Menu 和 Dummy 的宽度相同，但 dummy 只是一个没有内容的 div。
这将有效地调整以屏幕为中心的整个区域的大小，菜单看起来挂在内容的左侧。
JSFiddle of my demo: http://jsfiddle.net/Y9DCs/
From what I can see, right now you have a 2 column layout:
On the left is your "access" panel that contains your menu. On the right is your main content area.
I think you may be better served to have a main container with 3 sections:
You can then size the width of wrapper as Content + (2 * Menu), and give it margin: 0 auto;
Menu and Dummy would be the same width, except dummy would just be a div with no content.
This will effectively size the whole area as centered on the screen with the menu appearing to hang off the left side of Content.
经过一天的反复试验，我找到了自己的解决方案，很大程度上受到 Jordan 在他的文章中提出的建议的启发回答我的问题。尽管我的解决方案与乔丹提供的不同，但我应该感谢他，因为他让我朝着正确的方向思考。
一般来说，我会尽量谨慎对待人们关于彻底重新排列 CSS 的建议。在这种特殊情况下，这是毫无疑问的，因为我的网站布局比 Jordan 的 jsFiddle 示例更复杂，并且 jQuery 动画效果的类型只能通过我使用的定位类型实现。
我的“管道胶带”解决方案涉及将主块的每个元素包装在其自己的单独包装器中，以 margin:0 auto 为中心。这样我就不需要将 #access div 放在 #wrapper div 中（这是最大的挑战，因为它破坏了动画。）
我的解决方案也不涉及创建三列布局（由 Jordan 提出）或一个“虚拟”div。事实证明这是不必要的，因为我只想显示网站的左侧（菜单）。
不过，我想再次强调，如果不与乔丹沟通，我无法解决这个问题。这就是为什么我将乔丹的回答标记为“已接受”。
非常感谢你，乔丹！
After a day of trial and error I found my own solution, to a great degree inspired by the recommendation made by Jordan in his answer to my question. Even though my solution is different from that offered by Jordan, but I owe it to him, because he got me thinking in the right direction.
In general, I try to be careful about people's suggestions of drastically rearranging the CSS. In this particular case, it was out of question because the layout of my site is more complex than Jordan's jsFiddle example, and the kinds of jQuery animated effects are only possible with the kind of positioning I was using.
My "duct tape" solution involved wrapping every element of the main block in its own separate wrapper centered with margin:0 auto. This way I didn't need to place the #access div inside the #wrapper div (that was the biggest challenge because it ruined the animations.)
My solution also doesn't involve creating the three-column layout (proposed by Jordan) or a "dummy" div. It proved unnecessary because I am only interested in revealing the left side of the website (the menu).
Still, I want to emphasize once again that I wouldn't be able to solve this without communicating with Jordan about it. That's why I marked Jordan's answer as 'accepted'.
Thank you very much, Jordan!
您只需将所有内容包装在名为 main_wrapper 或其他内容的 div 中，然后为其指定 padding-left: 20px 或任何符合您喜好的内容
You just need to wrap all your content in a div called main_wrapper or something and then give it padding-left: 20px or whatever meets your fancy