溢出-x:hidden 的问题；在 Chrome 和 Firefox 中答案

【问题标题】：Problems with overflow-x:hidden; in Chrome & Firefox溢出-x:hidden 的问题；在 Chrome 和 Firefox 中
【发布时间】：2014-05-24 17:13:12
【问题描述】：

我遇到了overflow-x:hidden 的问题。我意识到有很多关于这个主题的帖子，但没有一个能完全解决我的问题，而且已经发布的问题的解决方案都没有奏效。所以，我发布了另一个“溢出：隐藏；”问题...

我的页面顶部有一个全宽（固定）导航栏和一个全屏幻灯片。其余内容以非常简单的方式进行（或者我认为）。页面其他地方有固定元素，我将正文设置为overflow-x:hidden; 以防止页面调整大小时出现尴尬的重叠。

问题是，在 Chrome 和 Firefox 中，我仍然可以使用触控板滚动 L 和 R。不好。

我已经重建了我的页面，并花费了大量时间使用开发工具、隐藏、删除和更改各种元素的位置。我尝试将overflow-x:hidden; 添加到我的.wrapper；这工作正常，但仍允许一定数量的横向滚动。我也尝试过设置scrollLeft(0)，正如这篇文章here 中所建议的那样。我无法弄清楚：

A) 为什么 overflow-x 不起作用，以及

B) 我溢出的内容来自哪里（乍一看，使用开发工具，一切似乎都包含得很好）。

由于我不确定究竟是什么导致了这个问题，所以我不能包含一个简洁的 JSFiddle sn-p。完整（静态）网站在这里：[已编辑，不再需要]

【问题讨论】：

您可能需要重新考虑您的设计。重新调整浏览器的大小，例如 500px 宽。由于您的 overflow-x 设置为隐藏，因此您无法滚动。除非您的浏览器是全屏的，否则一半的内容会被隐藏。
明白。公平地说，我的问题与设计无关。但是，是的，它可以使用一些断点和优化。在我弄清楚这个 L/R 滚动问题之前，我可能不会实现太多的断点。另外，我认为我申请 overflow-x:hidden 的原因是因为有一些元素导致它是必要的（即，有些东西超出了包装器的范围）。
或者，澄清一下：即使我删除了overflow-x:hidden，我仍然有一个问题，就是页面内容上的某些元素超出了窗口的范围，我到目前为止一直无法确定那个问题的根源。
我重新阅读了我的声明，似乎很苛刻。我喜欢外观和布局，我只是想指出较小的屏幕尺寸存在问题。至于实际问题，我无法在浏览器中重新创建问题（没有水平滚动）。
不用担心。如果您禁用overflow-x:hidden，则所有屏幕尺寸（水平滚动条，无论如何）都会出现问题。无论如何，我最终会解决的！

标签： html css google-chrome firefox browser

【解决方案1】：

您必须使用 boxmodel 重建页面，使用 css 类或库来实现良好的网格系统。固定元素从来都不是一个好的选择。上面提到的 boxmodel 网格可以使用 css 中的媒体查询根据 min-width 和 max-width 自定义移动使用。

【讨论】：

【解决方案2】：

这不是最有吸引力的选择，但如果 overflow-x: hidden; 不起作用，它可能会在您解决真正问题时进行临时修复：

http://jsfiddle.net/YWnpM/

$(window).on('scroll', function() { $(this).scrollLeft(0); //sets left scroll to 0px });

（我看到你说你尝试过这个，但这取决于你如何实现它 - 如果你在事件处理程序之外这样做，那么它不会起作用。）

【讨论】：

确实是临时修复，而我根据 RegisteredUser 的建议重建了我的页面。

【解决方案3】：

我只想扩展@advert2013 的答案，试图防止过度滚动：

$(window).scroll(function (e) {
    var $target = $(e.target);
    if ($target.scrollLeft() != 0) {
        $target.scrollLeft(0);
    }
});

【讨论】：