解决IOS滑动不畅问题

[TOC]
@(welcome)[前端菜鸟|掘金中]

  • 在编写移动端页面时,遇到一个很奇怪的问题,IOS向来滑动通畅,体验度明显甩开安卓十条街,但是在添加了上拉刷新下拉加载加载的插件后,IOS瞬间滑动不畅,慢成一坨.
  • 那赶脚就像,拖着汽车往前走的老哞…
  • 起初以为是插件底层的滑动事件影响了IOS,去掉插件之后,依然卡顿如初,what?!
  • 仔细对比之后,终于找到罪魁祸首,竟然是两行熟悉到不行的css
1
2
3
4
body,html{
height: 100%;
overflow: auto;
}

通过查找,终于找到了解决问题的方法

1
-webkit-overflow-scrolling: touch;

这个属性只兼容移动版 Safari iOS 5.0+,而且它有两个值

1
2
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开,滚动会立即停止 */

####auto

  • 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。

####touch

  • 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

``将这行代码放到我的根标签后,我的小苹果又再次欢快的跑起来了!正当我高兴的时候,又发现了一个问题,我写的固定定位导航条随着苹果的告诉滑动,出现了鬼畜情况!

``也就是说,我需要将我的固定定位排除在滑动之外!

``上代码

1
2
3
4
5
6
7
8
9
body,html{
height: 100%;
overflow: auto;
}
.scroll{
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

要滚动的部分给父元素加上class类scroll,需要注意的是设置的两个overflow形成了两个滚动条,很容易造成滚动问题,建议在苹果浏览器下调试好。

博主原创文