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

Posted 2022-12-10 登楼痕

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上失效】，所以还得看看页面有没有哪里是有问题的。

记录一下坑：

 

这个作者貌似并没有改过来。

还有一个issue问题就是padding-top/padding-bottom依旧会触发整个页面的橡皮筋回弹：

 没办法，把padding改成margin看起来就是可以的。

这个库坑太多，复杂页面慎用