在 iPhone 网站上禁用水平滚动答案

【问题标题】：disabling horizontal scroll on an iPhone website在 iPhone 网站上禁用水平滚动
【发布时间】：2013-03-30 13:42:09
【问题描述】：

我正在开发一个由 Wordpress 驱动的网站的 iPhone 版本，我想知道当网站在 iPhone 版 Safari 中打开时是否有任何方法可以禁用水平滚动。现在，我已经完成了一半的开发，只是为了检查是否可以禁用水平滚动，我隐藏了任何超过屏幕宽度的元素，但我仍然可以水平滚动到右侧。我尝试将以下代码放在<head> 的<style> 标记内，但这没有帮助：

body { 溢出-x：隐藏； }

我已将以下<meta> 代码放在头文件中，以在用户从 iPhone 上查看网站时回显，但它只会禁用用户捏合，即您无法通过捏合屏幕来放大和缩小。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

我目前正在使用 iPhone 4 查看网站，可以通过以下链接访问该网站：http://ignoremusic.com。期待你们的解决方案，谢谢。

解决方案：正如@Riskbreaker 所建议的，有一些元素的宽度超过了~312px，这就是为什么我仍然可以向左滑动并在调整所有此类元素的宽度后，我禁用了水平滑动。我学到的一件事是隐藏对于 iPhone/iPad，overflow-x 没有帮助，你必须将所有元素的宽度减小到您的宽度屏幕，否则您仍然可以水平滑动。

【问题讨论】：

所以根据您的“解决方案”部分 - 如果有屏幕外元素，是否有办法强制禁用水平滚动？

标签： iphone ios css mobile-safari horizontal-scrolling

【解决方案1】：

我知道我参加聚会有点晚了，但我遇到了同样的问题并通过添加以下内容解决了它：

body, html{
    overflow-x: hidden;
}

希望这对其他人有帮助！

【讨论】：

是的，不要忘记这里的html 部分是必不可少的。

【解决方案2】：

像这样在你的身体上添加溢出：

body    {
        font: 12px/20px "Helvetica neue", Helvetica, Arial, sans-serif;
        font-weight: normal;
        overflow: hidden;
        overflow-y: auto;
        }

是的，请继续这样做：

<meta name="viewport" content="width=device-width">

【讨论】：

感谢您的回复，但是添加CSS代码不起作用，我仍然可以水平滚动。
你是在 style.css 还是你的主 css 上添加这个？还有一些 CSS 在您的响应中被忽略，如下所示：#headertop {width: 980px;}.... 这使得水平方向可以滑动...只是一个需要先修复的示例...
只是为了检查它是否有效，我使用
感谢您的帮助。有一些元素超出了页面宽度，一旦我调整它，问题就解决了。再次感谢。
在尝试了许多其他解决方案之后，这就是解决问题的方法，谢谢。

【解决方案3】：

我在视口区域之外的移动菜单也遇到了同样的问题。 overflow-x：隐藏在安卓手机中解决，但在 iPhone 中没有。我通过将菜单的“绝对”位置更改为“固定”位置来解决：

body { overflow-x: hidden; }    
nav { position: absolute; width: 300px; right: -300px; }

到：

body { overflow-x: hidden; }    
nav { position: fixed; width: 300px; right: -300px; }

希望对你有帮助。

【讨论】：

谢谢！这对我的具体情况有所帮助，当时没有其他建议会有所帮助。 :)
这解决了我困扰了好几天的问题！
这解决了我在 iOS 12.x 上遇到的问题。虽然在 iOS 13.x 和 14.x 上运行良好。

【解决方案4】：

对我来说，这也解决了这个问题：

html {
    overflow-x: hidden;
    max-width: 100vw;
}

屏幕的最大宽度似乎是固定的。

【讨论】：