禁用 iPad 水平滚动

Posted 2023-03-06

技术标签:

【中文标题】禁用 iPad 水平滚动【英文标题】：Disable iPad horizontal scrolling 【发布时间】：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,htmloverflow-x:hidden!important

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

任何帮助将不胜感激。

【问题讨论】：

【参考方案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;

【讨论】：

以上是关于禁用 iPad 水平滚动的主要内容，如果未能解决你的问题，请参考以下文章

禁用滚动视图中的反弹禁用 pageView 控制器中的水平滚动

Ipad iOS 滚动不一致：禁用正文滚动但允许在某些元素上滚动