固定宽度的水平滚动条答案

【问题标题】：Horizontal scroll bar at a fixed width固定宽度的水平滚动条
【发布时间】：2013-07-06 20:24:31
【问题描述】：

请帮忙，我已经花了将近两天的时间，但无法确定是什么导致了网站上宽度为 1135 像素的水平滚动条。主包装器的宽度为 1135px，这是站点的最大宽度。所以在视口大小 1135px 应该没有水平滚动，但某些东西导致网站以该宽度水平滚动。我检查了所有元素的所有填充和宽度，还尝试一一删除节点以隔离问题，但没有运气。向更有经验并处理过此类问题的人寻求帮助。 [Link to the site]

【问题讨论】：

我无法复制我在 chrome、firefox 中尝试过的问题，即所有最新版本都没有水平条出现
在 Firefox 和 chrome 中测试。还使用 1135px 视口大小的在线工具进行了测试。
@user2563864 我没有看到任何水平滚动条！
你能提到你测试的在线工具吗？
quirktools.com/screenfly

标签： html css scrollbar overflow horizontal-scrolling

【解决方案1】：

找到问题出在这个标签上

media="all"
#viewport 
{
padding: 30px;
}

删除填充并查看水平条消失。如果您需要填充，请尝试不在视口中的另一种替代方法..

让我看看希望能帮到你..:)..

检查附加的图像和我做了什么

图片前

后像

谢谢乙

【讨论】：

很抱歉，我在任何地方都没有看到这种风格
是的，我看到了，但是该元素和样式不是实际站点的 css 的一部分。您只能在使用此工具对其进行测试时看到此属性。所以在此处删除它不会改变网站上的任何内容。
是的，dat padding 是针对 screenfly 的...所以它不会给出确切的外观..您可以在开发人员工具中将其删除，您将获得网站在各种分辨率下的确切外观..dat为什么在我的 rowser der 中查看您的网站没有问题..问题仅出现在 screenfly 中，因为它的填充
我明白你在说什么。但是我觉得奇怪的是，如果您在浏览器中以 1135 像素的宽度查看该网站，您看不到滚动条。因为如果我将浏览器窗口的大小调整为 1135 像素，那么滚动条就会出现。所以在我的最后，它不仅在 screenfly 中，而且在浏览器中。事实上，我将它提高到 1149px 浏览器宽度
最后我弄明白了，它是主题使用的行类，上面设置了宽度，它用于正文内容和页脚，因此删除任何一个节点都没有修理它。但是感谢您的所有帮助，不胜感激。

【解决方案2】：

你可以用这个 css 隐藏水平滚动条

html {
      overflow-x: hidden;
}

如果你想把它带回任何页面添加

<style type='text/css'>

.element { 
     overflow-x: scroll !important;
}

</style>

使用这个jquery

if($(window).outerWidth() < '1135px'){
     $('html').css({overflow: scroll});
} else {
     $('html').css({overflow: hidden});
}

确保你有一个 ajax 文件

【讨论】：

这不是一个好的解决方案..它会隐藏页面中的所有水平滚动条..他可能需要水平滚动条来实现应用程序中的某些功能。
@ABertil overflow: auto; 怎么样？
如果他需要页面上的滚动条，他可以制作一个样式标签并在其中做html {overflow-x: scroll !important;}
@OllieCole 认真的吗？然后它会明确地将它们全部隐藏！
@OllieCole !important 摧毁了他的整个级联！看到这个：coding.smashingmagazine.com/2010/11/02/…