21

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

身体 { 溢出-x：隐藏；}

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

<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，这就是为什么我仍然可以向左滑动，在调整所有这些元素的宽度后，我禁用了水平滑动。我学到的一件事是隐藏 overflow-x 对 iPhone/iPad 没有帮助，你必须将所有元素的宽度减小到屏幕宽度，否则你仍然可以水平滑动。

4

5 回答 5

27

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

body, html{
    overflow-x: hidden;
}

希望这对其他人有帮助！

于 2016-05-24T01:03:33.760 回答
14

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

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">
于 2013-04-08T13:14:31.893 回答
4

对于位于视口区域之外的移动菜单，我遇到了同样的问题。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; }

希望能帮助到你。

于 2017-06-08T08:48:39.217 回答
1

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

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

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

于 2020-05-07T12:20:17.247 回答
0

我最近遇到了同样的问题，但没有其他答案对我有用。在最新版本的 Safari（至少是桌面版）中，您还必须将位置设置为相对。

body, html {
  position: relative;
  overflow: hidden;
}
于 2022-02-22T16:10:27.103 回答