禁用 iPad 水平滚动答案

【问题标题】：Disable iPad horizontal scrolling禁用 iPad 水平滚动
【发布时间】：2014-05-11 23:04:36
【问题描述】：

我有一个网站，其中包含视口之外的元素，我将其用于动画，每次滚动到页面的不同部分时，它们基本上都会启动。

问题是您可以水平滚动，从而将网站的内容移出视口并访问不应该看到的元素（类似于 {right:-660px;} 的元素直到它应该进入视口 {right:100px} 或其他东西）。

已经试过了

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

和

body,html{overflow-x:hidden!important}

我确信这是一个可能让很多人失眠的问题，就像我一样。

任何帮助将不胜感激。

【问题讨论】：

标签： ipad css responsive-design media-queries

【解决方案1】：

在 Mac 和 iOS 上，overflow-x:hidden 在身体上并不像在 PC 上那样宽容。如果您必须有一个元素必须出现在屏幕外，请将其放在不比屏幕宽且带有overflow:hidden 的div 中。

例如

.overflow-div { max-width: 100%; position: relative; overflow: hidden; }
.my-animatable-element { position: absolute; right: -660px; }

<body>
 <div class="overflow-div">
    <div class="my-animatable-element"></div>
 </div>
</body>

链接或代码确实可以帮助您解决问题。

注意：max-width:100% 在我的简化示例中不是必需的，但可能在您的特定情况下，这就是我放入它的原因。

【讨论】：

你好亚当，我也试过了，还是没有运气。我的绝对定位元素位于隐藏的 div 中。如果您向左滑动，视口会延伸到它们的位置。我有一个过度包装的 div#page，它不会隐藏应用样式的 div 的水平溢出。
那么您的页面上可能还有其他内容太宽导致页面水平滚动。有链接吗？
是的，亚当正是如此，你帮我找出了盲点。 :) 我会将其标记为正确答案，只需在上方添加您的评论即可。干杯并感谢您的宝贵时间！

【解决方案2】：

 <meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
 <style type="text/css">
 body {
 overflow-x:hidden;
 }

【讨论】：

也试过了，还是不行。我在描述中也提到过尝试这样做，但由于格式原因，它似乎已被删除。

【解决方案3】：

我遇到了同样的问题。这对我有用：

div {
    overflow:hidden;
}

【讨论】：