1. 程式人生 > >h5頁面對於ios系統在瀏覽器中存在橡皮筋拉伸行為的優化處理

h5頁面對於ios系統在瀏覽器中存在橡皮筋拉伸行為的優化處理

問題:所做的h5頁面在公司app中以及微信等瀏覽器中存在拉伸時出現滑動卡頓,向下拉昇底部或者向上滑動頂部出現微信瀏覽器自帶灰黑色背景以及由於佈局出現的body背景顏色。

解決方法:

採用iNoBounce.js,

使用方法:在需要滾動滑動的元素上加上height或者max-height,overflow:auto,以及-webkit-overflow-scrolling:touch這三要素,即可解決拉伸出現app自帶背景或者微信等瀏覽器自帶灰黑色背景,但可能由於我用的框架問題(用的sui框架),仍然會出現H5頁面本身所帶的背景,不過可以將背景顏色設定為透明或者白色,倒也不是影響很大,另外最初對於這個問題本來想做到能夠使H5頁面上下固定,不存在橡皮筋類似的拉伸效果,有的人說只要不使用-webkit-overflow-scrolling:touch這個就不會出現這種拉伸效果,但是由於使用的框架以及本身能力問題,無法做到。如果有好的方法或者能做到的朋友方便的話私信下,被暫時打敗的說。o(╥﹏╥)o