我们将overflow-x值设置为隐藏在正文和可滚动元素上,但移动版Safari会忽略这些值。在桌面上,溢出值工作正常。
相关代码:
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位于视口外部,只有在有人做出手势后才能进入视图。
重现:
1)访问iPhone(而不是iPad)上的www.tekiki.com。滚动到右侧,即使我们修正了车身宽度,您也会看到catalog_page如何扩展站点的宽度。
答案 0 :(得分:12)
将html { overflow: hidden; }
添加到您的CSS中,它应该修复它。
答案 1 :(得分:4)
在iOS 7.1 / 8.2上使用Mobile Safari进行测试 以下代码对我来说既不适合。
html {overflow:hidden; }
我相信它是Mobile Safari的一个错误/功能,其他浏览器,包括OSX上的Safari运行良好。但溢出:隐藏在iPhone / iPad上的工作,如果你也设置位置:固定为HTML元素。像这样:
html {overflow:hidden;位置:固定; }
答案 2 :(得分:3)
现在是2020年,但我仍在努力寻找答案。
经过多次实验,我发现this answer实际上是唯一可以工作的工具。
但是,它会在所有浏览器中的整个页面上创建一个奇怪的黑条。另外,请勿将单位用于零值。
因此,我的最终解决方案是:(任何转换函数都可以解决问题,只记得设置零值即可。)
html, body {
... (font, background, stuff)
overflow-x: hidden;
/* Safari compatibility */
height: 100%;
width: 100%;
transform: translate3d(0,0,0);
}
请注意,此解决方案可能会影响您的导航。 “位置:固定;”由于“ transform”属性设置了“ none”以外的内容,因此无法在儿童上使用 https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed
答案 3 :(得分:2)
添加html {overflow:hidden;你的CSS应该修复它。
此解决方案对我不起作用。
相反,我在body中创建一个包装器div并将overflow-x:hidden应用于包装器:
<强> CSS 强>
#wrapper {
overflow-x: hidden;
}
<强> HTML 强>
<html>
...
<body>
<div id="wrapper">
...
</div>
</body>
</html>
答案 4 :(得分:1)
在我的情况下,以下确实解决了问题
body, html {
overflow-x: hidden;
}
答案 5 :(得分:1)
我有以下代码来禁用双击缩放:
* {
touch-action: none;
}
这虽然打破了溢出滚动。这是我的解决方法:
pre {
overflow-x: scroll;
touch-action: pan-x;
}
答案 6 :(得分:0)
为了解决旧设备(iphone 3)上的问题,我不得不混合解决方案,因为它们没有单独工作。
我最终在html正文中添加了一个包装div:
<html>
<body>
<div id="wrapper">....</div>
</body>
</html>
并使用以下方式设计样式:
#wrapper {
overflow: hidden
}
它终于奏效了。
答案 7 :(得分:0)
如果是html,正文overflow-x: hidden;
无效,请尝试查找text-indent。例如,flexslider的默认设置将一些元素设置为text-indent -9999px
。我发现这是重写html溢出规则。
答案 8 :(得分:0)
我实际上放弃了IOS Safari中的CSS溢出-x。 我改用了脚本
$(window).scroll(function ()
{
if ($(document).scrollLeft() != 0)
{
$(document).scrollLeft(0);
}
});