开发移动端的同学可能都知道,当在你用overflow-y:scorll属性的时候,内容超出容器溢出滚动的效果很迟顿,特别是在IOS系统里,通常情况下,我们为了追求好的用户体验,会使用屏幕滚动插件better-scroll了,这个插件是真心好用,但是有些情况下我们可能并不想那么麻烦,而且页面的体验要求也没有那么高,下面给大家介绍一个简单偷懒的办法.

这时候可以使用-webkit-overflow-scrolling:touch这个属性,让滚动条产生滚动回弹的效果,就像ios原生的滚动条一样流畅

简单说明一下:

-webkit-overflow-scrolling :控制元素在移动设备上是否使用滚动回弹效果。
auto:使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
touch:使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果,继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。

需要注意的事项:

通过动态添加内容撑开容器,结果根本不能滑动。
在safari上,点击其他区域,再在滚动区域滑动,滚动条无法滚动。 
在safari上,使用了-webkit-overflow-scrolling:touch之后,页面偶尔会卡住不动。

解决问题的方法:

第一步:将使用-webkit-overflow-scrolling的元素的定位取消或手动改成position:static;
第二步:将使用-webkit-overflow-scrolling的元素添加一个子元素,设置子元素的高度为height:101%,或者为了精确一些写成height:calc(100vh + 1px),注意这个加号前后都要有空格.
 

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐