移動端頁面在IOS裏滑動不暢解決辦法

開發移動端的同窗可能都知道，當在你用overflow-y:scorll屬性的時候，內容超出容器溢出滾動的效果很遲頓，特別是在IOS系統裏，一般狀況下，咱們爲了追求好的用戶體驗，會使用屏幕滾動插件better-scroll了，這個插件是真心好用，可是有些狀況下咱們可能並不想那麼麻煩，並且頁面的體驗要求也沒有那麼高，下面給你們介紹一個簡單偷懶的辦法．

這時候可使用-webkit-overflow-scrolling:touch這個屬性，讓滾動條產生滾動回彈的效果，就像ios原生的滾動條同樣流暢

簡單說明一下：

-webkit-overflow-scrolling ：控制元素在移動設備上是否使用滾動回彈效果。
auto：使用普通滾動, 當手指從觸摸屏上移開，滾動會當即中止。
touch：使用具備回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果，繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。

須要注意的事項：

經過動態添加內容撐開容器，結果根本不能滑動。
在safari上，點擊其餘區域，再在滾動區域滑動，滾動條沒法滾動。　
在safari上，使用了-webkit-overflow-scrolling:touch以後，頁面偶爾會卡住不動。

解決問題的方法：

第一步：將使用-webkit-overflow-scrolling的元素的定位取消或手動改爲position:static;
第二步：將使用-webkit-overflow-scrolling的元素添加一個子元素，設置子元素的高度爲height:101%，或者爲了精確一些寫成height:calc(100vh + 1px),注意這個加號先後都要有空格．