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

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

前言

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

解決方法

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

-webkit-overflow-scrolling: auto  |  touch;

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

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

兼容寫法

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

ps：

1、如果添加了此屬性但是不起作用，再添加overflow-y: scroll,就可以了。

2、當一個元素設置過position: absolute|relative，后再增加-webkit-overflow-scrolling: touch;屬性后，會發(fā)現(xiàn)，滑動幾次后就滾動區(qū)域會卡住，不能在滑動，這時給元素增加個z-index值就可以了。

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

名稱欄目：如何解決overflow-scrolling滾動卡頓
分享路徑：http://jinyejixie.com/article4/ggggie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、移動網(wǎng)站建設、商城網(wǎng)站、關(guān)鍵詞優(yōu)化、電子商務、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)