H5页面在IOS上滚动回弹问题

Posted 2023-04-24

参考技术A 问题：h5页面在ios浏览器上，当滚动到顶部后，手指抬起，滚动结束，再次下拉；或者，当滚动到底部，手指抬起，滚动结束，再次上拉。然后手指不松开就直接往相反方向拉会导致页面整体被拉动，触发苹果的回弹效果。

解决：实际上滚动的是body内的直接子div，这个div高度不能设置100%，必须让他超过滚动高度，描述应该不准确，但可以解决问题。
eg. base内容超过100%。此时会触发回弹滚动，导致页面被截断。

eg. base内容超过100%。此时向相反方向拉会滚动内容，内容不会被截断。

但这样，只能解决屏幕内容被截断问题，依然会拉伸，但是可以给body设置 背景色来盖住默认白色，淡化问题。

ios嵌入h5去掉“橡皮筋”回弹

UI在走查页面的时候好几次提到了这个问题，在h5页面最顶部或者底部拉页面的时候，还会出现一块页面之外的空白，松开手页面回弹回去，UI表示这样看起来页面像是截断了很不友好，能否拉了之后还是背景色而不是白色。

首先想到的就是外面包一层高度为需要视窗高度的fixed div，然后让里面的内容滚动。可惜的是在ios上滑动出现问题——当scroll bar消失后，页面滑不动了。

于是搜索一下怎么去掉ios的“橡皮筋”，于是看到了插件iNoBounce，其原理就是在支持-webkit-overflow-scrolling属性的元素上监听touchmove事件，用Js实现子元素的滚动，并且当到边界的时候，event.preventDefalut()来控制不要继续滑动。

所以依旧还是在整个页面外面包一层div，将div设置为视口高度，内部的div加上：

height: 100%;

overflow-y: scroll;

 -webkit-overflow-scrolling: touch;

这样就解决了橡皮筋的问题。

不过要注意的是， -webkit-overflow-scrolling: touch;这个会让内部的一些z-index失效【仅ios上失效】，所以还得看看页面有没有哪里是有问题的。