如何解決overflow-scrolling滾動(dòng)卡頓

本篇內(nèi)容介紹了“如何解決overflow-scrolling滾動(dòng)卡頓”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)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)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！