在 Chrome 中停止水平滚动的指南

Question

我知道这个问题之前已经被问过，但通常提供的解决方案是将其添加到目标标签中：

overflow-x: hidden

我已经做到了。此修复程序可防止 Firefox 中的水平滚动，但在涉及 Chrome 和 IE8 时会失败（目前对于 IE8 而言问题不大）。从之前的问题来看，这可能已经成为 Chrome 版本 34 以来的一个问题。那么我该如何解决这个问题呢？

导致滚动的问题 CSS 如下所示：

// Tablet portrait and landscape
@media (min-width: @screen-sm-min) {
    & {
        margin: 0 -100% !important;
        padding: 30px 100% !important;
    }
}

以上使内容根据要求均匀地出现在中心。关于这个或可能的资源的任何建议来解释为什么会在 Chrome 中发生这种情况？

谢谢

附：我还注意到这个网站没有这个问题——为什么会这样？结构上的根本区别？还是我正在寻找的 CSS？

Answer 1

感谢大家的努力，尽管我提供的信息很少。我们解决了这个错误，尽管我们仍然不知道它为什么会发生。对于不同的页面，我们有不同的 .LESS 文件，但它们都被导入到一个名为 ice-styles.less

的文件中

这是我添加的overflow-x: hidden，由于某种原因，即使附加了 !important 后缀，它也被忽略了。我对此的理解是它应该适用于所有页面，因为它被附加到 html 和 body 标记上。

因此，我们将上面的同一行移到问题正在发生的 .LESS 页面中并解决了问题 - 但它没有将问题引入其他页面 - 这表明页面的结构是真正的罪魁祸首.

再次感谢大家

Answer 2

您是否尝试过使用 jquery 对其进行样式设置？

$(document).ready(function(){
$('body').css('overflow-x','hidden !important');
})

or even if it didnt worked trying it after few seconds
$(document).ready(function(){
setTimeOut(function(){
$('body').css('overflow-x','hidden !important');
},1000)
})

Answer 3

有些东西正在覆盖你溢出：隐藏标签... 也许有一些 css 给你的元素一些宽度，然后你强制溢出，这在 chrome 或 IE 中有时不会发生......

Answer 4

html {
    overflow-x: hidden; //or none
}