最近開發一款產品，要求PC端兩列展現：web
移動端展現：佈局
使用display：flex佈局，在最外面的wrap上添加overflow-y：auto；手機端使用媒體查詢將兩列寬度設爲100%；flex
出現問題：當表格數據比較大時，PC端與安卓滾動條出現，滾動無問題，可是蘋果IOS在表格裏滑動沒法觸發滾動；spa
解決方法：code
在滾動容器內加-webkit-overflow-scrolling: touchxml
添加後偶爾會出現滑動不流暢，仔細查了-webkit-overflow-scrolling該屬性blog
-webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果.開發
auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會當即中止。touch: 使用具備回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆棧上下文。產品
網上查了許多資料，具體有下面的幾個坑：it
在safari上，使用了-webkit-overflow-scrolling:touch以後，頁面偶爾會卡住不動（本次問題）
經過動態添加內容撐開容器，結果根本不能滑動的bug（本次問題）
在safari上，點擊其餘區域，再在滾動區域滑動，滾動條沒法滾動的bug（本次問題）
手勢可穿過其餘元素觸發元素滾動
Safari對於overflow-scrolling用了原生控件來實現。對於有-webkit-overflow-scrolling的網頁，會建立一個UIScrollView，會對子元素解析生成高度，由於子元素高度爲動態加載渲染，不會再對其生成滾動，處理辦法提早設置高度佔位，後者動態渲染完成後，再次設置滾動
解決辦法：
子元素設置最小高度：
或者
子元素設置高度：min-height:101%
height:calc(100% - 300px + 1px)