移动端H5常见问题以及解决方案

移动端H5常见问题以及解决方案

问题

下面列举了我遇到的一些常规问题,如有遇到其他问题的请在评论区补充,之后我也会实践加以补充,感谢!

以下解决方案,均经过我测试成功,健康安全,请放下食用.由于篇幅问题,某些非核心的解决方案的实现细节暂未谈论,需要的自行研究.

1.iOS滑动不流畅
表现

上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动.整体表现就是滑动不流畅,没有滑动惯性.

产生原因
为什么在iOS的webview中滑动不流畅,它是如何定义的?*

最终我在safari文档里面寻找到了答案(文档链接参考资料项),原来在iOS5.0以及之后的版本,滑动有定义两个值auto和touch,默认值为auto.
-webkit-overflow-scrolling:touch; 当手指从触摸屏上移开,会保持一段时间的滚动.
-webkit-overflow-scrolling:auto; 当手指从触摸屏上移开,滚动会立即停止.

解决方案一

1. 在滚动容器上增加滚动touch方法,将-webkit-overflow-scrolling值设置为touch
2. 设置滚动条隐藏:.container :: webkit-scrolling-scrollbar {display:none}
3. 注意:可能会导致使用postion:fixed、固定定位的元素,随着页面一起滚动

解决方案二

1. 设置外部overflow为hidden,设置内容元素overflow为auto.内部元素body即产生滚动,超出部分隐藏
2. body{overflow-y:hidden} .wrapper{overflow-y:auto}

两者结合使用更加

2.iOS上拉边界下拉出现白色空白

表现

手指按住 屏幕下拉,屏幕顶部会多出一块白色区域.手指按住屏幕上拉,底部多出一块白色区域.

产生原因
在iOS中,手指按住屏幕上下拖动,会触发touchmove事件.这个事件触发的对象时整个webview容器.容器自然会被拖动,剩下的部分会成空白

解决方案一
监听事件禁止滑动
移动端触摸事件有三个,分别定义为:

1. touchstart:手指放在一个dom元素上
2. touchmove:手指拖拽一个dom元素
3. touchend