移动端-滚动区域优化方法总结
在做移动端前端开发过程中,我们经常会遇到滚动区域,而在ios和android上,滚动区域的表现也不一样,例如滚动条的样子就不一样,有图有真相
所以第一步:统一长相!
在移动端(特别在微信端),浏览器对css新属性支持都很好,而且大部分移动端浏览器是基于webkit内核的,所以我们可以webkit对滚动条样式定义来入手。具体请看下
/*整体部分*/ ::-webkit-scrollbar{} /*滑动轨道*/ ::-webkit-scrollbar-track{} /*滑块*/ ::-webkit-scrollbar-thumb{} /*滑块效果*/ ::-webkit-scrollbar-thumb:hover{}
来张形象的示意图:
由于移动端没有hover状态,所以滑块效果这个可以去掉。废话不多说,上Demo
(注:用chrome打开)请戳->:http://htmlpreview.github.io/?https://github.com/wghe110/bog20151125-scroll/blob/master/demo1.html
手机可扫:
至此,ios和android上滚动条样子统一了,世界充满了平等
进阶第二步:优化滑动效果
浏览器自带的滑动卡卡的,体验稍稍有些不好,所以改进下!
方案一:允许独立的滚动区域和触摸回弹(webkit独有)
-webkit-overflow-scrolling: touch
优点:简单
缺点:只有ios支持、且在ios上滚动条样式丢失
方案二:运用iscroll.js
优点:兼容ios和android
缺点:代码繁琐、不好维护
总结:
1、在实际项目中、一般利用webkit属性来统一滚动条样子,不使用iscroll.js。
2、在项目要求较高的情况下:使用iscroll.js来模拟滚动区域
3、不推荐使用-webkit-overflow-scrolling : touch;这个属性,兼容不好,而且会有bug
自己写的,有参考内容,如有不足请联系企鹅:397856638,标注:博客