怎样如丝般顺滑

internet

weber

怎样如丝般顺滑

10.70.121.216

Part 1.  实现弹性滚动效果

iOS

全局滚动   

局部滚动  

默认支持(demo1)

默认没有滚动条,且滑动起来干涩(demo2)

iOS

局部滚动实现弹性滚动效果

body{    -webkit-overflow-scrolling: touch;}

Tips: 建议挂在body上,避免很多奇怪的bug

.scroll-el{    overflow: auto;}

(demo3)

Android定制版本多,表现各异默认没有弹性滚动效果-webkit-overflow-scrolling 默认浏览器不支持在chrome的Android版支持

Part 2.  iOS的出界困扰

什么情况下会出界?

全局滚动   

局部滚动  

滚动到页面顶部(或底部)时继续向下(向上)滑动,就会出现(demo4)

滚动到页面顶部(或底部)时,手指离开停下,再继续向下(向上)滑动,就会出现(demo5)

怎么解决出界问题?

局部滚动:使用scrollFix

(demo6)

怎么解决出界问题?

全局滚动:暂无好的办法,非要解决的话就处理成局部滚动吧

怎么解决出界问题?

局部滚动:固定区域阻止touchmove默认事件

Part3.  Android下蛋疼的滚动

Rocket群签到的纠结

使用了局部滚动

(demo3)

Android下有局部滚动,会导致滚动条显示异常,且滚动不流畅

Android下,只使用全局滚动

不要在任何一个节点上设置 overflow: auto

(demo7)

滚动条叠在固定区域上面,可接受

.top{    position: fixed;    height: 60px;}

.bottom{    position: fixed;    height: 60px;}

.content{    padding-top: 60px;    padding-bottom: 60px;}

流畅滚动的N条军规

1.  body上加 -webkit-overflow-scrolling: touch2.  iOS尽量使用局部滚动3.  iOS引进scrollFix4.  Android尽量使用全局滚动    4.1  尽量不用overflow: auto;    4.2  用 min-height: 100%代替 height: 100%5.  iOS下带有滚动条且position:absolute的节点不要设置背景色

重播 分享 评论
×
×

iPresst

版本:1.0

Copyright © iPresst.com. All Rights Reserved.

创作者:TAT.Aishen, TAT.CG, TAT.DM, TAT.Jarvis, TAT.Kinvix, TAT.Weber, TAT.Yussica