-webkit-overflow-scrolling

auto: 使用普通滾動, 當手指從觸控式螢幕上移開，滾動會立即停止。
touch: 使用具有回彈效果的滾動,當手指從觸控式螢幕上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆疊上下文。

在移動端上，在你用overflow-y:scorll屬性的時候，你會發現滾動的效果很很生硬，很慢，這時候可以使用-webkit-overflow-scrolling:touch這個屬性，讓滾動條產生滾動回彈的效果，就像ios原生的滾動條一樣流暢。

問題

但是的但是，-webkit-overflow-scrolling:touch這個屬性真的是超級神坑，比如:

• 在safari上，使用了-webkit-overflow-scrolling:touch之後，頁面偶爾會卡住不動。(中招)
• 在safari上，點選其他區域，再在滾動區域滑動，滾動條無法滾動的bug。
• 通過動態新增內容撐開容器，結果根本不能滑動的bug。(中招)
• 滾動中 scrollTop 屬性不會變化
• 手勢可穿過其他元素觸發元素滾動
• 滾動時暫停其他 transition

解決方案：

方案一

<div id="app" style="-webkit-overflow-scrolling: touch;">
    <div
 
 style="min-height:101%"></div>
</div>

http://www.ssnd.com.cn 化妝品OEM代加工

方案二

<div id="app" style="-webkit-overflow-scrolling: touch;">
    <div style="height:calc(100%+1px)"></div>
</div>

方法就是在webkit-overflow-scrolling:touch屬性的下一層子元素上，將height加1%或1px。從而主動觸發scrollbar。

思考為什麼會出現這個問題

Safari對於overflow-scrolling用了原生控制元件來實現。對於有-webkit-overflow-scrolling的網頁，會建立一個UIScrollView，提供子layer給渲染模組使用。我們也就只能解決到這了。