-webkit-overflow-scrolling屬性控制元素在移動設備上是否使用滾動回彈效果.

auto

使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。touch使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。-webkit-overflow-scrolling是真的創建了帶有硬件加速的系統級控件，所以效率很高。但是這相對是耗更多內存的，最好在產生了非常大面積的overflow時才應用。需求是需要手動設置滾動高度的，js代碼是

el.scrollTop = 500;

此時，我發現在IOS環境下，每次手動改變scrollTop后整個容器變成空白，但手指觸摸一下內容就出來了，scrollTop是成功改變了的，只是內容繪制出錯。（這里我個人判斷是瀏覽器底層的問題，因為安卓不存在這問題）

我通過用延遲加載，延遲設置滾動，或者是手動改變容器中的內容來強制重繪，可惜都不起作用，最終找到問題出在-webkit-overflow-scrolling: touch，因為當我把值設置為auto時BUG不存在。

思路出來了，在手動設置scrollTop前，先關閉慣性滾動，待設置完成后重新開啟即可。

貼上解決代碼：

el.WebKitOverflowScrolling = 'auto';
el.scrollTop = 500;
el.WebKitOverflowScrolling = 'touch';

查了一下網上的資料，H5端代碼就不再敷述了，看一下Native處理

-webkit-overflow-scrolling: touch 的流程如下：

實際上，Safari真的用了原生控件來實現，對于有-webkit-overflow-scrolling的網頁，會創建一個UIScrollView，提供子layer給渲染模塊使用

要實現這個效果很簡單，只需要加一行css代碼即可：

總結

以上是生活随笔為你收集整理的CSS3中-webkit-overflow-scrolling: touch 的使用方法详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。