Html 在移动 safari 中忽略溢出-x 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17767176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overflow-x value ignored in mobile safari
提问by Crashalot
We set the overflow-x values to hidden on both the body and scrollable elements, but mobile Safari ignores these values. On the desktop, the overflow values work fine.
我们将 body 和可滚动元素上的 overflow-x 值设置为隐藏，但移动版 Safari 忽略了这些值。在桌面上，溢出值工作正常。
Relevant code:
相关代码：
body { overflow-x:hidden; width:320px; height:100%; min-height:100%; margin:0; background:-webkit-linear-gradient(top,#e8e4dc,#f2f0eb); }
.page_list, .content { max-height:370px; box-sizing:border-box; padding:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch }
#catalog_page { border-left:1px solid #CCC; z-index:28; position:absolute; top:0; width:200px; height:460px; background:white; -webkit-transition:-webkit-transform 0.1s ease-in;; -webkit-transform:translate3d(0,0,0); display:none; }
catalog_page is what sits outside the viewport, sliding into view only after someone does a gesture.
catalog_page 是位于视口之外的内容，只有在有人做了一个手势后才会滑入视图。
To reproduce:
重现：
1) Visit www.tekiki.comon your iPhone (not iPad). Scroll to the right, and you'll see how catalog_page extends the site's width, even though we fixed the body width.
1)在您的 iPhone（而非 iPad）上访问www.tekiki.com。向右滚动，您将看到 catalog_page 如何扩展站点的宽度，即使我们固定了主体宽度。
回答by keirog
Add html { overflow: hidden; }to your CSS and it should fix it.
添加html { overflow: hidden; }到您的 CSS，它应该修复它。
回答by Suyuan Chang
Tested with Mobile Safari on iOS 7.1/8.2 Following code didn't work for me neither.
在 iOS 7.1/8.2 上用 Mobile Safari 测试以下代码对我也不起作用。
html { overflow: hidden; }
html {溢出：隐藏；}
I believe it's a bug/feature of Mobile Safari, other browsers, including Safari on OSX works well. But the overflow:hidden works on iPhone/iPad if you also set position:fixed to HTML element. Like this:
我相信这是 Mobile Safari 的一个错误/功能，其他浏览器，包括 OSX 上的 Safari 运行良好。但是如果您还将 position:fixed 设置为 HTML 元素，则溢出：隐藏适用于 iPhone/iPad。像这样：
html { overflow: hidden; position: fixed; }
html {溢出：隐藏；位置：固定；}
回答by Sébastien Gicquel
Add html { overflow: hidden; } to your CSS and it should fix it.
添加 html { 溢出：隐藏；到您的 CSS，它应该修复它。
This solution didn't work for me.
这个解决方案对我不起作用。
Instead, i create a wrapper div inside the body and apply the overflow-x:hidden to the wrapper :
相反，我在正文中创建了一个包装器 div 并将溢出-x:hidden 应用到包装器：
CSS
CSS
#wrapper {
overflow-x: hidden;
}
html
html
<html>
...
<body>
<div id="wrapper">
...
</div>
</body>
</html>
回答by cokoon
in my case, the following did solve the problem
就我而言，以下确实解决了问题
body, html {
overflow-x: hidden;
}
回答by Sam Soffes
I had the following code to disable double-tap to zoom:
我有以下代码来禁用双击缩放：
* {
touch-action: none;
}
This broke overflow scrolling though. Here's how I fixed it:
这虽然打破了溢出滚动。这是我修复它的方法：
pre {
overflow-x: scroll;
touch-action: pan-x;
}
回答by loikein
It's 2020 but I am still trying to find an answer for this.
现在是 2020 年，但我仍在努力为此寻找答案。
After many experiments, I found that this answerwas actually the only working one.
However, it does create an odd black bar across the whole page in all browsers. Also, you should not use units for zero values.
但是，它确实会在所有浏览器中的整个页面上创建一个奇怪的黑条。此外，您不应将单位用于零值。
Therefore, my final solution is this: (any transform function should do the trick, just remember to set zero values.)
因此，我的最终解决方案是这样的：（任何变换函数都可以解决问题，只需记住设置零值即可。）
html, body {
... (font, background, stuff)
overflow-x: hidden;
/* Safari compatibility */
height: 100%;
width: 100%;
transform: translate3d(0,0,0);
}
回答by Tien Lu
I actually gave up on css overflow-x in IOS safari. I used script instead
我实际上放弃了 IOS Safari 中的 css overflow-x。我改用脚本
$(window).scroll(function ()
{
if ($(document).scrollLeft() != 0)
{
$(document).scrollLeft(0);
}
});
回答by Nathan Shanahan
If html, body overflow-x: hidden;is not working for you try looking for text-indent. The default settings of flexslider for example have some elements set to text-indent -9999px. I found this was overriding html overflow rules.
如果 html，bodyoverflow-x: hidden;不适合您尝试查找 text-indent。例如，flexslider 的默认设置有一些元素设置为text-indent -9999px. 我发现这是覆盖 html 溢出规则。
回答by spaghetticode
In order to solve the issue on older devices (iphone 3) as well I had to mix the solutions, because they didn't work singularly.
为了解决旧设备（iphone 3）上的问题，我不得不混合解决方案，因为它们不能单独工作。
I ended up adding a wrapper div to the html body:
我最终在 html 正文中添加了一个包装 div：
<html>
<body>
<div id="wrapper">....</div>
</body>
</html>
and styling it with:
并使用以下样式对其进行样式设置：
#wrapper {
overflow: hidden
}
and it finally worked.
它终于奏效了。
