前言
如果你對(duì)某個(gè)div或模塊使用了overflow: scroll屬性仪芒，在iOS系統(tǒng)的手機(jī)上瀏覽時(shí)，則會(huì)出現(xiàn)明顯的卡頓現(xiàn)象套蒂。但是在android系統(tǒng)的手機(jī)上則不會(huì)出現(xiàn)該問(wèn)題正蛙。
解決方法
以下代碼可解決這種卡頓的問(wèn)題：-webkit-overflow-scrolling: touch;绅作，是因?yàn)檫@行代碼啟用了硬件加速特性坪它，所以滑動(dòng)很流暢骤竹。這個(gè)方法的確可以解決ios5.0、android4.0以后系統(tǒng)的滑動(dòng)卡頓問(wèn)題往毡。
-webkit-overflow-scrolling: auto | touch;
auto： 普通滾動(dòng)蒙揣，當(dāng)手指從觸摸屏上移開，滾動(dòng)立即停止
touch：滾動(dòng)回彈效果开瞭，當(dāng)手指從觸摸屏上移開懒震，內(nèi)容會(huì)保持一段時(shí)間的滾動(dòng)效果罩息，繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢(shì)的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文个扰。
兼容寫法
over-flow: auto; /* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
ps：
1瓷炮、如果添加了此屬性但是不起作用，再添加overflow-y: scroll,就可以了递宅。
2崭别、當(dāng)一個(gè)元素設(shè)置過(guò)position: absolute|relative，后再增加-webkit-overflow-scrolling: touch;屬性后恐锣，會(huì)發(fā)現(xiàn)，滑動(dòng)幾次后就滾動(dòng)區(qū)域會(huì)卡住舞痰，不能在滑動(dòng)土榴，這時(shí)給元素增加個(gè)z-index值就可以了。
參考文獻(xiàn)：http://www.reibang.com/p/1f4693d0ad2d
https://www.cnblogs.com/wuyinghong/p/7450041.html?utm_source=debugrun&utm_medium=referral
