CSS 在 iPhone 网站上禁用水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15879710/
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
disabling horizontal scroll on an iPhone website
提问by Fahad Hasan
I am developing an iPhone version of a Wordpress driven website and I was wondering if there's any method to disable horizontal scrolling when the website is open in Safari for iPhone. Right now, I am half way through the development and just to check if I could disable horizontal scrolling, I have hidden any of the elements which were exceeding the screen width but still I can scroll horizontally to the right. I tried putting the following code inside the <style>tags in the <head>but that didn't help:
我正在开发一个由 Wordpress 驱动的网站的 iPhone 版本，我想知道当网站在 iPhone 的 Safari 中打开时是否有任何方法可以禁用水平滚动。现在，我已经完成了一半的开发，只是为了检查是否可以禁用水平滚动，我隐藏了任何超出屏幕宽度的元素，但我仍然可以向右水平滚动。我尝试将以下代码放入<style>标签中，<head>但这没有帮助：
body { overflow-x: hidden; }
身体{溢出-x：隐藏；}
I have put the following <meta>code inside the head file to echo if the user is viewing the website from an iPhone but it only disables user-pinching i.e. you cannot zoom in and zoom out by pinching the screen.
<meta>如果用户正在从 iPhone 查看网站，我已将以下代码放在头文件中以进行回显，但它仅禁用用户捏合，即您无法通过捏合屏幕来放大和缩小。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I am currently using an iPhone 4 to check the website and the website can be accessed by going to this link: http://ignoremusic.com. Looking forward to a solution from you guys, thanks.
我目前正在使用 iPhone 4 查看网站，可以通过以下链接访问该网站：http: //ignoremusic.com。期待各位大侠的解答，谢谢。
SOLUTION:As suggested by @Riskbreaker, there were a few elements which were exceeding the width of ~312px which is why I could still swipe to the left and after adjusting the width of all such elements, I disabled horizontal swipe. One thing which I learned is that hiding overflow-x doesn't help in the case of an iPhone/iPad, you have to reduce the width of all the elements to that of the width of your screen otherwise you'll still be able to swipe horizontally.
解决方案：正如@Riskbreaker 所建议的，有一些元素的宽度超过了 ~312px，这就是为什么我仍然可以向左滑动，在调整所有这些元素的宽度后，我禁用了水平滑动。我学到的一件事是，在 iPhone/iPad 的情况下，隐藏溢出-x 无济于事，您必须将所有元素的宽度减少到屏幕宽度的宽度，否则您仍然可以水平滑动。
采纳答案by Riskbreaker
Add overflows on your body like this:
像这样在你的身体上添加溢出：
body {
font: 12px/20px "Helvetica neue", Helvetica, Arial, sans-serif;
font-weight: normal;
overflow: hidden;
overflow-y: auto;
}
And yes stay with this:
是的，坚持这个：
<meta name="viewport" content="width=device-width">
回答by Austin737
I know I am a little late to the party, but I was having this same issue and solved it by adding:
我知道我参加聚会有点晚了，但我遇到了同样的问题并通过添加以下内容解决了它：
body, html{
overflow-x: hidden;
}
Hopefully this will help someone else!
希望这会帮助别人！
回答by Cristiana
I was having the same issue with a mobile menu positioned outside the viewport area. overflow-x: hidden solved in Android phones, but not in iPhones. I solved by changing 'absolute' to 'fixed' position to the menu:
我对位于视口区域外的移动菜单遇到了同样的问题。溢出-x：在Android 手机中解决了隐藏问题，但在iPhone 中没有解决。我通过将菜单的“绝对”更改为“固定”位置来解决：
body { overflow-x: hidden; }
nav { position: absolute; width: 300px; right: -300px; }
to:
到：
body { overflow-x: hidden; }
nav { position: fixed; width: 300px; right: -300px; }
Hope it helps.
希望能帮助到你。
回答by Robert
For me this fixed the issue as well:
对我来说，这也解决了这个问题：
html {
overflow-x: hidden;
max-width: 100vw;
}
By the max width the screen seems to be fixed.
通过最大宽度，屏幕似乎是固定的。
