在移動端開發的時候經常會碰到區域滾動的需求，當然實現起來也是非常簡單的，給需要滾動的元素定高然後新增乙個overflow-y:scorll自然就可以滾動了，但是新增這個屬性之後，使用chrome或者其他瀏覽器工具除錯時是支正常的，但是到手機上時滾動效果就十分的奇怪，滾動會讓人感覺有卡頓感。這個時候使用乙個屬性就可以解決這個問題。-webkit-overflow-scrolling:touch，這個屬性會讓滾動條產生回彈效果，讓滾動沒有那麼生硬。
在mdn上是這麼定義這個屬性的：
-webkit-overflow-scrolling 屬性控制元素在移動裝置上是否使用滾動回彈效果.然而是不是設定了這個屬性之後就萬事大吉了呢？也不全是這樣子的，其實這個屬性也還是有一些坑的。auto: 使用普通滾動, 當手指從觸控螢幕上移開，滾動會立即停止。
touch: 使用具有回彈效果的滾動, 當手指從觸控螢幕上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立乙個新的堆疊上下文。
比較常見的問題有：
在網上也能看到別人也遇到過同樣的問題。
偶爾卡住的問題，解決方案網上眾說紛紜，遇到了很多相同的說法，比如如果卡住不動的話，就加乙個z-index，就能解決該問題的說法。
在試了很多次之後，這種說法沒有一次解決過這個問題。這個說法能夠傳播出來，可能是使用者當時在使用的時候遇到了-webkit-overflow-scrolling:touch點透或者層級的問題。所以該方案不具有適用性。
下面總結一下幾種比較好的解決方案：
保證使用了該屬性的元素上沒有設定定位
如果出現偶爾卡住不動的情況，那麼在使用該屬性的元素上不設定定位或者手動設定定位為static，這樣會解決部分因為定位(relative、fixed、absolute)導致的頁面偶爾不能滾動的bug。
但是滑動到頂部繼續手指往下滑，或者到底部繼續往上滑，還是會觸發卡住的問題（其實是整個頁面上下回彈），說他算bug，其實就是ios8以上的特性，如果滾動區域大一點，使用者不會覺得這是bug，如果小了，使用者會不知道發生了什麼而卡住了。如果新增動態內容頁面不能滾動，讓子元素height+1
如果在-webkit-overflow-scrolling:touch屬性的元素上，想通過動態新增內容來撐開容器，觸發滾動，是有bug 的，頁面是會卡住不動的。
方法就是在webkit-overflow-scrolling:touch屬性的下一層子元素上，將height加1%或1px。從而主動觸發scrollbar。
main-inner這個bug產生於ios8以上（不十分肯定，但在ios5~7上需要手動使用translatez(0)開啟硬體加速）
safari對於overflow-scrolling用了原生控制項來實現。對於有-webkit-overflow-scrolling的網頁，會建立乙個uiscrollview，提供子layer給渲染模組使用。
除此之外，這個屬性還有很多bug，包括且不限於以下幾種：
如果專案中區域滾動部分不是特別多的話直接使用-webkit-overflow-scrolling:touch也不會有太大的問題，但是如果這個需求很多的話可以考慮使用better-scroll這個庫來做移動端區域滾動。
個人部落格：lcw blog
移動端 滾動區域優化方法總結
在做移動端前端開發過程中，我們經常會遇到滾動區域，而在ios和android上，滾動區域的表現也不一樣，例如滾動條的樣子就不一樣，有圖有真相 所以第一步 統一長相！整體部分 webkit scrollbar 滑動軌道 webkit scrollbar track 滑塊 webkit scrollba...
移動端專案開發總結
對於這次移動端頁面開發,新接觸到的東西不少,首要的乙個就是響應式布局,在移動頁面開發中,需要考慮到移動端各種不同的螢幕大小而使用不同的布局來呈現出想要的效果.在小螢幕的移動裝置中.可能需要減少頁面中的資訊量,並且改變原有的布局方案,採用適用於移動端的布局方案.而在中等螢幕大小的移動裝置中,如平板,則...
移動端彈出層滾動穿透問題總結
移動端彈出層 簡稱layer 時，層內有大量文字需要滾動，但是背景層 簡稱body 會隨著layer的滾動而滾動，使用者體驗較差。參考了網上的一些資料，總結解決方案如下 scrollfix scrollfix body 彈出層前 防止body層向下滾動後出現內容顯示不全的問題 html,body a...