滑動會卡 bug解決

-webkit-overflow-scrolling 用來控制元素在移動設備上是否使用滾動回彈效果.
兼容安卓和IOS的寫法如下

overflow:auto;/* winphone8和android4+ */ 
-webkit-overflow-scrolling: touch; /* ios5+ */ 
取值

auto
使用普通滾動, 當手指從觸摸屏上移開,滾動會立即停止。
touch
使用具有回彈效果的滾動, 當手指從觸摸屏上移開,內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。

例子
-webkit-overflow-scrolling: touch; /* 當手指從觸摸屏上移開,會保持一段時間的滾動 */ 
-webkit-overflow-scrolling: auto; /* 當手指從觸摸屏上移開,滾動會立即停止 */ 
瀏覽器兼容性

移動版 Safari iOS 5.0+

Bug

當你給一個元素設置過position:absolute;或者position:relative;後再增加-webkit-overflow-scrolling: touch;屬性後,你會發現,滑動幾次後可滾動區域會卡主,不能在滑動,這時給元素增加個z-index值就可以了。
-webkit-overflow-scrolling: touch; 
position:absolute; 
z-index:1; 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章