移动端overflow失效问题

摘要：在项目开发中，我们有时候需要实现元素从屏幕外移动到屏幕内的效果。问题但是如果你的页面是移动端页面的话，你会发现有时候会出现失效的问题。出现这样的问题一般是因为你的元素是相对于移动的，这样的情况在移动端就会出现问题。

在项目开发中，我们有时候需要实现元素从屏幕外移动到屏幕内的效果。

我们一般会有这样的方案：先通过position: absolution或transform: translate() 使得元素移动到屏幕之外，然后给父元素添加overflow: 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.ucloud.cn/yun/112949.html