移动端overflow失效问题

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


我们一般会有这样的方案:
先通过position: absolution或transform: translate() 使得元素移动到屏幕之外,然后给父元素添加overflow: hidden属性禁止滚动,在给元素加过渡或动画,使它移动进来。

问题

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

解决方法

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