滑動會卡 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;
兼容安卓和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;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.