在 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?

中发生这种情况

谢谢

P.S。我还注意到这个网站没有那个问题——为什么会这样？结构上的根本区别？还是我要找的CSS？

Answer 1

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

Answer 2

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

的文件中

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

所以我们将上面的同一行移动到出现问题的 .LESS 页面中并解决了问题 - 但它没有将问题引入其他页面 - 这表明页面的结构是真正的罪魁祸首。

再次感谢大家

Answer 3

您是否尝试过 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 4

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

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

Guidelines to stop horizontal scrolling in Chrome

css

scroll

google-chrome

overflow