在响应式网站上禁用水平滚动+移动，其中某些元素绝对定位

Question

我有一个快速响应的网站，我用

禁用了水平滚动

body{ overflow-x: hidden }

但我仍有一个问题，即在触控设备中我可以向右移动屏幕（或使用右箭头键在桌面浏览器中移动）

诀窍在于我有一个Css3动画，它将元素从margin-left: 1000px移动到margin-left: -1000px。

我尝试将代码重新分配到绝对位置left: 1000px到left: -1000px同样的问题

我甚至尝试使用：<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />

或添加其他html{ overflow-x: hidden }

没有任何效果，

任何人都有任何其他想法如何禁用向右移动，以便我的设计保持响应，我可以保持元素（云）动画？

网站：http://www.eq8.eu

THX

Answer 1

我建议将溢出物留在身体上。使用max-width: 100%;隐藏每个部分的包装，这将阻止您的页面水平滚动，当内容不适合屏幕时，仍允许我沿着页面向下移动。我还认为将box-sizing: border-box;（包含所有供应商前缀）放在一个很好的方法可以避免您的盒子从填充和边框中被挤出容器。