CSS3中-webkit-overflow-scrolling: touch 的使用方法詳解

-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代碼便可：