本篇內(nèi)容介紹了“如何解決overflow-scrolling滾動(dòng)卡頓”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司主要業(yè)務(wù)有網(wǎng)站營(yíng)銷策劃、成都做網(wǎng)站、網(wǎng)站制作、微信公眾號(hào)開發(fā)、小程序定制開發(fā)、成都h5網(wǎng)站建設(shè)、程序開發(fā)等業(yè)務(wù)。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當(dāng)客戶，還把客戶視為我們的合作伙伴，在開展業(yè)務(wù)的過程中，公司還積累了豐富的行業(yè)經(jīng)驗(yàn)、營(yíng)銷型網(wǎng)站建設(shè)資源和合作伙伴關(guān)系資源，并逐漸建立起規(guī)范的客戶服務(wù)和保障體系。 

前言

如果你對(duì)某個(gè)div或模塊使用了overflow: scroll屬性，在iOS系統(tǒng)的手機(jī)上瀏覽時(shí)，則會(huì)出現(xiàn)明顯的卡頓現(xiàn)象。但是在android系統(tǒng)的手機(jī)上則不會(huì)出現(xiàn)該問題。

解決方法

以下代碼可解決這種卡頓的問題：-webkit-overflow-scrolling: touch;，是因?yàn)檫@行代碼啟用了硬件加速特性，所以滑動(dòng)很流暢。這個(gè)方法的確可以解決ios5.0、android4.0以后系統(tǒng)的滑動(dòng)卡頓問題。

-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è)置過position: absolute|relative，后再增加-webkit-overflow-scrolling: touch;屬性后，會(huì)發(fā)現(xiàn)，滑動(dòng)幾次后就滾動(dòng)區(qū)域會(huì)卡住，不能在滑動(dòng)，這時(shí)給元素增加個(gè)z-index值就可以了。

“如何解決overflow-scrolling滾動(dòng)卡頓”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！