移动端-滚动区域优化方法总结

在做移动端前端开发过程中，我们经常会遇到滚动区域，而在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

转载于:https://www.cnblogs.com/hege/p/4995385.html