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

在瀏覽被H5與iOS客戶端混合編程的頁面時，由于Safari瀏覽器的特性，當H5頁面滑動到頁面頂部、頁面底部的位置時，繼續下拉/上拉H5網頁會出現“露出瀏覽器底色”的問題，同時出現回彈動畫的效果

效果如下圖：

橡皮筋效果

惹人愛又惹人惱的橡皮筋效果

iOS 5 之后開始支持 Native Scrolling，為 Web App 帶來媲美原生應用的滾動體驗
—— 引用自 https://www.zhihu.com/question/22256539問題描述部分

內嵌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

總結

以上是生活随笔為你收集整理的内置h5 调用safari系统浏览器打开_开发教我做设计：移动端H5页面中的橡皮筋效果...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。