禁用iPad水平滚动_Ipad_Css_Responsive Design_Media Queries

禁用iPad水平滚动

ipad css responsive-design

禁用iPad水平滚动,ipad,css,responsive-design,media-queries,Ipad,Css,Responsive Design,Media Queries,我有一个网站，在视口外有元素，我用它来制作动画，每次你滚动到页面的不同部分时，它们基本上都会进入问题是，你可以水平滚动，从而将网站的内容移出视口，并访问不应该看到的元素（类似于带有{right:-660px；}的元素，该元素在进入视口{right:100px}或其他内容之前应该是看不见的）已经试过了 <meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; us

我有一个网站，在视口外有元素，我用它来制作动画，每次你滚动到页面的不同部分时，它们基本上都会进入

问题是，你可以水平滚动，从而将网站的内容移出视口，并访问不应该看到的元素（类似于带有{right:-660px；}的元素，该元素在进入视口{right:100px}或其他内容之前应该是看不见的）

已经试过了

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

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

非常感谢您的帮助。


 <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;
 }

身体{
溢出x：隐藏；
}

与Mac和iOS一样，机身上的

overflow-x:hidden

不像PC上的那样宽容。如果您必须有一个元素必须显示在屏幕外，请将它放在一个

div

中，该div不比屏幕宽，并且上面有

overflow:hidden

例如

.overflow div{最大宽度：100%；位置：相对；溢出：隐藏；}
.my可设置动画的元素{位置：绝对；右：-660px；}

一个链接，或者代码，会在很大程度上帮助你解决问题

注意：

max width:100%

在我的简化示例中不是必需的，但可能是在您的特定情况下，这就是我将其放入的原因。

我遇到了相同的问题。这就是我的工作原理：

div {
    overflow:hidden;
}

我也试过了，没用。在我的描述中，我也提到过尝试，但由于格式的原因，它似乎被删掉了。你好，亚当，我也尝试过，仍然没有运气。我的绝对定位元素位于一个隐藏的div中。如果向左滑动，视口将一直延伸到其位置。我有一个过度包装的div#页面，它不会隐藏应用样式时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>

div {
    overflow:hidden;
}