移动端overflow问题
2018-01-01 13:39
393 查看
在项目开发中,我们有时候需要实现元素从屏幕外移动到屏幕内的效果。
我们一般会有这样的方案:
先通过position: absolution或transform: translate() 使得元素移动到屏幕之外,然后给父元素添加overflow: hidden属性禁止滚动,在给元素加过渡或动画,使它移动进来。
出现这样的问题一般是因为你的元素是相对于body移动的,这样的情况在移动端就会出现问题。
尽量不要相对于body进行定位,而是给他加一个父元素,然后相对于父元素进行定位(一般给父元素添加position:relative),再给父元素加上overflow:hidden 或 overflow-x:hidden 或 overflow-y:hidden来解决。
我们一般会有这样的方案:
先通过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来解决。
相关文章推荐
- 解决移动端overflow:hidden无效的问题
- overflow:auto滚动在移动端出现滑动不流畅问题
- 移动端html的overflow:hidden属性失效问题
- 移动端开发(一):解决body体中设置overflow:hidden;屏幕仍然会出现滚动条问题
- 移动端开发(一):解决body体中设置overflow:hidden;屏幕仍然会出现滚动条问题
- 在移动端,body:overflow 无效的问题
- android 中,关于线程安全退出的问题(from stack overflow)
- 设置text-overflow文本溢出隐藏时的对齐问题
- 移动端滚动穿透问题
- python help dir stackoverflow docs google--遇到python问题怎么样解决
- overflow解决float浮动后高度自适应问题
- 移动端页面滚动穿透问题解决方案
- fastclick.js - 解决移动端 click 事件响应慢和点透问题
- dexindexoverflowException 65536 的问题
- 移动端问题总纲
- 调优JVM内存,并解决OutOfMemoryError,StackOverflowError等异常问题
- 移动端笔记 — JS与CSS问题及解决方法
- Android学习笔记----解决“com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536”问题
- 003 - 移动端按钮中文字不垂直居中问题解析
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题