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

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

效果如下圖：

橡皮筋效果

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

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

內(nèi)嵌H5頁面帶來的橡皮筋效果源自于iOS系統(tǒng)支持的Native scrolling，雖然這種功能為App內(nèi)嵌H5頁面帶來媲美iOS原生應用到滾動體驗，但也帶來了惹人愛又惹人鬧的橡皮筋效果。

一方面，橡皮筋效果通過一種更為生動的方式讓滑動到頁面頂部或者底部的用戶知道“頁面已經(jīng)到頭了”。但另一方面，當內(nèi)嵌H5頁面被用在模擬原生頁面的需求中時，橡皮筋效果總會讓頁面變得很奇怪，無法達到100%完全模擬原生頁面的效果。

2019淘寶雙十一預熱活動小游戲的首頁

現(xiàn)在有哪些場景會觸發(fā)此橡皮筋效果？

• 分享到第三方社交App中的H5頁面。例如在微信中打開餓了么搶紅包的H5頁面
• App內(nèi)嵌的H5頁面

解決方法

通過讓iOS客戶端開發(fā)同學添加代碼，可以讓H5前端開發(fā)同學調(diào)用iOS客戶端接口，在H5頁面的頭部和尾部禁止此橡皮筋效果

特別注意：

• 安卓默認沒有橡皮筋效果
• 在macOS系統(tǒng)上的Safari瀏覽器，當用Magic Track觸控板滑動頁面到頂部時，同樣也會出現(xiàn)橡皮筋效果，同樣根據(jù)設計需求開發(fā)可以禁止掉此橡皮筋效果

相關話題索引：

iOS safari 如何阻止“橡皮筋效果”？?www.zhihu.com解決瀏覽器上下滾動露出底色問題（滾動回彈 or 橡皮筋效果） · Issue #42 · muwenzi/Program-Blog?github.com

2019.10.21

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。