overflow-x: hidden;不生效的问题

• 问题：但是如果你的页面是移动端页面的话，你会发现有时候会出现overflow:hidden失效的问题。
  出现这样的问题一般是因为你的元素是相对于body移动的，这样的情况在移动端就会出现问题。

解决方法

• 如果你必须相对于body进行定位，可以给body加上width: 100% ; height: 100%; position: fixed来解决，这种方法就是利用了fixed定位的特点，使得body相对于屏幕定位，自然就无法滚动了。但这种方法的缺点也很明显，就是无论y轴还是x轴方向都无法滚动了，如果你只想禁止一个方向的滚动，那这种方法就不适合了。
• 尽量不要相对于body进行定位，而是给他加一个父元素，然后相对于父元素进行定位（一般给父元素添加position：relative）,再给父元素加上overflow:hidden 或 overflow-x：hidden 或 overflow-y：hidden来解决。

还可以参考：https://www.jianshu.com/p/317e7f87c394
https://segmentfault.com/a/1190000012658384