Question

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

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

reference of the problem

已经尝试过了

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

和

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

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

非常感谢任何帮助。

Answer 1

作为Mac和iOS，身上的overflow-x:hidden并不像PC上那样宽容。如果您必须有一个必须在屏幕外显示的元素，请将其放在不比屏幕宽的div上，并且overflow:hidden上有.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>。

E.g。

max-width:100%

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

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

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

Answer 3

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

div {
    overflow:hidden;
}

禁用iPad水平滚动

3 个答案: