詳解overflow-scrolling解決滾動卡頓問題
我要評論前言
如果你對某個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：滾動回彈效果，當手指從觸摸屏上移開，內容會保持一段時間的滾動效果，繼續(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值就可以了。
參考文獻：https://www.jianshu.com/p/1f4693d0ad2d
https://www.cnblogs.com/wuyinghong/p/7450041.html
到此這篇關于詳解overflow-scrolling解決滾動卡頓問題的文章就介紹到這了,更多相關overflow-scrolling滾動卡頓內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- 這篇文章主要介紹了詳解CSS3：overflow屬性的相關資料，幫助大家更好的理解和制作CSS3特效，感興趣的朋友可以了解下2020-11-17
- 這篇文章主要介紹了CSS3 用text-overflow解決文字排版問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-10-28
這篇文章主要介紹了css中overflow:hidden失效問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2020-02-10css設置Overflow實現(xiàn)隱藏滾動條的同時又可以滾動
這篇文章主要介紹了css設置Overflow實現(xiàn)隱藏滾動條的同時又可以滾動的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-27- 這篇文章主要介紹了css 設置overflow:scroll 滾動條的樣式 ，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-25
詳解為什么設置overflow為hidden可以清除浮動帶來的影響
在平時的業(yè)務開發(fā)寫CSS中，為了滿足頁面布局，元素的浮動特性我們用的不能再多了。使用浮動的確能夠解決一些布局問題，那么為什么設置overflow為hidden可以清除浮動帶來的2018-11-28
CSS中overflow-y: visible;不起作用的原因分析及解決方法
小編最近遇到這樣的需求，移動端的h5頁面，要求有一排可選擇的卡片, 超出容器部分可以左右滑動，同時每張卡片左上角要有一個刪除按鈕。接下來通過本文給大家介紹CSS中overf2018-09-13- 這篇文章主要給大家介紹了關于css中text-overflow屬性與文本截斷的相關資料，文中給出了詳細的示例代碼供大家參考學習，希望本文的內容對各位前端開發(fā)者們能帶一定的幫助，2017-06-04
詳解CSS中zoom屬性或overflow:auto屬性清除浮動的作用
這篇文章主要為大家介紹了CSS中zoom屬性或overflow:auto屬性清除浮動的作用,文中通過實例代碼介紹的很詳細，相信會對大家的理解和學習具有一定的參考借鑒價值，有需要的朋2016-11-26- 這篇文章主要介紹了CSS中overflow清除浮動的用法,讓對IE6的支持再進行最后一點續(xù)命...需要的朋友可以參考下2015-09-28
