-webkit-overflow-scrolling 與滾動回彈效果.

參考來源：https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling

　　　　　https://www.w3cways.com/1988.html

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

事故の原由

要作有不少列表的頁面，而後並不適用iscroll等滾動的插件，作完也沒按以後，滑動列表卡頓卡頓的，遭啦，這樣子的滑動太讓人不舒服。

網上搜索了一下，發現了一個新屬性，-webkit-overflow-scroll，專治「該病」。我手快的設置body設置上-webkit-overflow-scrolling: touch，喲西，頁面滾動起來舒服多了，再也不是是卡頓卡頓的（測試機iPhone6s）。上MDN搜索了一下該屬性的兼容性，有點失望，目前只是iOS系統得支持了。不過也不影響，至少加上這個體驗可讓iOS用戶體驗更棒一點。

取值

-webkit-overflow-scrolling: auto  |  touch;

auto： 普通滾動，當手指從觸摸屏上移開，滾動當即中止

touch：滾動回彈效果，當手指從觸摸屏上移開，內容會保持一段時間的滾動效果，繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆棧上下文。

推薦寫法

下面是兼容安卓和iOS的寫法

over-flow: auto;     /* winphone8和android4+ */
-webkit-overflow-scrolling: touch;    /* ios5+ */

 

 

適用範圍

我通常在寫頁面何時用到這個屬性的狀況呢。

一、通常就是頁面要滾動，而後不使用一些滾動的插件

二、彈窗內容過長，此時須要滾動顯示，那麼此時加上這個屬性，滾動起來體驗就大大提高了。

使用過程遇到問題

一、我在非body元素，添加這個屬性，居然沒有效果。若是添加上overflow-y: scroll,就能夠優雅的滾動起來了。

二、當一個元素設置過position: absolute|relative，後再增長-webkit-overflow-scrolling: touch;屬性後，會發現，滑動幾回後就滾動區域會卡住，不能在滑動，這時給元素增長個z-index值就能夠了。

解決方法：

給元素增長個z-index值

webkit-overflow-scrolling: touch;
position:absolute;
z-index:1;