之前做移動(dòng)端項(xiàng)目的時(shí)候，同事推薦使用-webkit-overflow-scrolling:touch;屬性，當(dāng)時(shí)只是知道在元素內(nèi)容有滾動(dòng)條的時(shí)候使用這個(gè)屬性，可以使?jié)L動(dòng)比較流暢。
然后在MDN上查了一下：
-webkit-overflow-scrolling屬性是來控制元素在移動(dòng)設(shè)備上是否有回彈的效果。
它有兩個(gè)屬性值：
-
auto:使用普通滾動(dòng)，當(dāng)手指在屏幕上離開時(shí)，滾動(dòng)立即停止
-touch：使用具有回彈效果的滾動(dòng), 當(dāng)手指從觸摸屏上移開，內(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果。繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢(shì)的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文。
兼容性寫法：
verflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
bug
當(dāng)你給一個(gè)元素設(shè)置過position:absolute;或者position:relative;后再增加-webkit-overflow-scrolling: touch;屬性后，你會(huì)發(fā)現(xiàn)，滑動(dòng)幾次后可滾動(dòng)區(qū)域會(huì)卡主，不能在滑動(dòng)，這時(shí)給元素增加個(gè)z-index值就可以了。
-webkit-overflow-scrolling: touch;
position:absolute;
z-index:1;
