可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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.
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.
To reproduce:
1) Visit www.tekiki.com on 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:
Add html { overflow: hidden; } to your CSS and it should fix it.
回答2:
Tested with Mobile Safari on iOS 7.1/8.2
Following code didn't work for me neither.
html { overflow: hidden; }
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:
html { overflow: hidden; position: fixed; }
回答3:
Add html { overflow: hidden; } to your CSS and it should fix it.
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 :
CSS
#wrapper {
overflow-x: hidden;
}
html
<html>
...
<body>
<div id="wrapper">
...
</div>
</body>
</html>
回答4:
It's 2020 but I am still trying to find an answer for this.
After many experiments, I found that this answer was 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);
}
Be aware, this solution may influence on your navigation.
"position: fixed;" will not work on children because of "transform" property set something other than "none"
https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed
回答5:
in my case, the following did solve the problem
body, html {
overflow-x: hidden;
}
回答6:
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;
}
回答7:
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.
I ended up adding a wrapper div to the html body:
<html>
<body>
<div id="wrapper">....</div>
</body>
</html>
and styling it with:
#wrapper {
overflow: hidden
}
and it finally worked.
回答8:
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.
回答9:
I actually gave up on css overflow-x in IOS safari.
I used script instead
$(window).scroll(function ()
{
if ($(document).scrollLeft() != 0)
{
$(document).scrollLeft(0);
}
});
