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

Posted 登楼痕

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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上失效】,所以还得看看页面有没有哪里是有问题的。

记录一下坑:

 

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

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

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

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

以上是关于ios嵌入h5去掉“橡皮筋”回弹的主要内容,如果未能解决你的问题,请参考以下文章

IOS端小程序橡皮筋回弹效果解决方案及坑总结(uni-swipe-action在IOS端的坑)

IOS端小程序橡皮筋回弹效果解决方案及坑总结(uni-swipe-actiond在IOS端的坑)

Android ListView拉到顶/底部,像橡皮筋一样弹性回弹复位

如何在 iOS 网络应用程序中禁用橡皮筋?

阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)

使用特定键盘键的 qt 橡皮筋选择