隐藏窗口滚动条而不移动居中的内容答案

【问题标题】：Hide window scrollbars without moving centered content隐藏窗口滚动条而不移动居中的内容
【发布时间】：2013-03-23 14:50:46
【问题描述】：

是否可以（暂时）隐藏主窗口（垂直）滚动条（body/html 上的滚动条）而不（稍微）移动居中的内容？

在body, html 上设置overflow: hidden 会隐藏滚动条，但在执行此操作时，居中的内容会向右移动一半的滚动条宽度。我可以添加padding-right: <width-of-scrollbar>，但这会有所不同，并且如果没有滚动条开始，也会移动内容。

【问题讨论】：

【解决方案1】：

您可以相对定位居中的部分（左侧：50%），然后使用 javascript 将位置设置为固定像素。在 jQuery 中：

$(".centered").offset({left : $(".centered").offset().left});

【讨论】：

这样做会在调整窗口大小时固定元素的位置。而且你必须让脚本知道所有居中的元素，这是不希望的，因为我正在寻找一个尽可能独立于内容的通用解决方案。
如果您想消除滚动条，我认为无论如何您都需要编写脚本。所以给每个居中的元素同一个类，并在这个类上调用 jQuery。之后 $(window).resize 将成为您的朋友。我听说的唯一非 js 解决方案是在 html 元素上使用overflow-y:scroll，但是这个显示滚动条区域即使你不能滚动页面。 css-tricks.com/…
脚本 - 当然。查找并更改页面上的每个居中元素，不。这有很多问题。而且这个解决方案甚至无法正常工作 - 例如。尝试使用窗口/框架的宽度小于居中内容的宽度来加载您的示例。
这个解决方案可以调整为支持 onresize、居中而不是单个元素、body-width in %、max-width 等。jsfiddle.net/willemvb/jP3PK/4（未在 IE 中测试...）