内置h5 调用safari系统浏览器打开_开发教我做设计：移动端H5页面中的橡皮筋效果...

什么是橡皮筋效果（Over Scroll）？

在浏览被H5与iOS客户端混合编程的页面时，由于Safari浏览器的特性，当H5页面滑动到页面顶部、页面底部的位置时，继续下拉/上拉H5网页会出现“露出浏览器底色”的问题，同时出现回弹动画的效果

效果如下图：

橡皮筋效果

惹人爱又惹人恼的橡皮筋效果

iOS 5 之后开始支持 Native Scrolling，为 Web App 带来媲美原生应用的滚动体验
—— 引用自 https://www. zhihu.com/question/2225 6539 问题描述部分

内嵌H5页面带来的橡皮筋效果源自于iOS系统支持的Native scrolling，虽然这种功能为App内嵌H5页面带来媲美iOS原生应用到滚动体验，但也带来了惹人爱又惹人闹的橡皮筋效果。

一方面，橡皮筋效果通过一种更为生动的方式让滑动到页面顶部或者底部的用户知道“页面已经到头了”。但另一方面，当内嵌H5页面被用在模拟原生页面的需求中时，橡皮筋效果总会让页面变得很奇怪，无法达到100%完全模拟原生页面的效果。

2019淘宝双十一预热活动小游戏的首页

现在有哪些场景会触发此橡皮筋效果？

• 分享到第三方社交App中的H5页面。例如在微信中打开饿了么抢红包的H5页面
• App内嵌的H5页面

解决方法

通过让iOS客户端开发同学添加代码，可以让H5前端开发同学调用iOS客户端接口，在H5页面的头部和尾部禁止此橡皮筋效果

特别注意：

• 安卓默认没有橡皮筋效果
• 在macOS系统上的Safari浏览器，当用Magic Track触控板滑动页面到顶部时，同样也会出现橡皮筋效果，同样根据设计需求开发可以禁止掉此橡皮筋效果

相关话题索引：

iOS safari 如何阻止“橡皮筋效果”？​www.zhihu.com

解决浏览器上下滚动露出底色问题（滚动回弹 or 橡皮筋效果） · Issue #42 · muwenzi/Program-Blog​github.com

2019.10.21