大概三个月之前，我发布了一个JS组件，《 TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片 》。后来陆续在项目中都有用到，觉自己得还是很方便的。
今天，我又带来了自己空余时间写的另一个组件，TouchScroll。它最大程度上模拟了ios上的默认UI组件的滚动条效果。
为什么开发这个东西
其实很大一部分原因是自己想通过写这么一个东西来更好地熟悉PC和触屏手机的JS开发方案中的差别和特点。当然还有一个原因当然就是有可能项目中会用到这个，例如，在多栏功能页面中。
在页面上，一个容器如果内容的尺寸超过容器的大小，会自动出现滚动条，这个滚动条在不同浏览器中时各有差别的（windows 8上的IE的滚动条的metro风更是颠覆了IE多年的滚动条样式），并且自定义样式性也各不相同（如IE和chrome的通过css改变滚动条的方法就很不一样）或不可定义。而且，在IOS4上，出现滚动条的容器是不可被手指滚动浏览的（IOS5上的safair已经没有这个问题了），你一拖动页面，总是整个网页被拖动了。
而TouchScroll正是解决这个问题的，并且它在所有PC和手机浏览器上提供了统一的滚动条样式。PC上支持鼠标拖动页面浏览或者拖动滚轮来滚动容器，手机上支持手指滑动滚动容器。它也支持自适应大小的容器（目前有一些类似插件则是渲染出不可改变大小的容器）。TouchScroll压缩后只有8K。
TouchScroll开发注意的问题
首先是用不用css3，TouchScroll我前后开发了两版，第一版在支持css3的浏览器上，容器的移动以及缓动效果均有css3提供，在IE上则有JS动画提供缓动效果。这个版本遇到了一个我无法解决的问题（因为要兼容IE，所以我没用translate，而是普通的绝对定位absolute，这样子遇到了滚动条动画中时的位置定位问题，没找到解决办法），关于css3的，后来又由于各种原因，这个版本放弃了，又重新开发了目前这个版本。这个版本里的缓动效果是由JS支持的。
还遇到一个快速移动后的缓动问题，需要取一定时间内的移动距离以及时间来计算加速度并从而计算出缓动的距离以及开始的速度。最后我是在拖动过程中（moveEvent）记录了每一次的时间与坐标，然后在拖动结束时（endEvent），取最后不大于200ms内的时间和距离，从而以此推算出需要缓动的距离和速度。大概过程如下：
1: var disc=[[/*时间*/],[/*坐标*/]]; //disc是用来保存时间与坐标的二维数组
2: var getMousePoint=function(){....} //获取鼠标坐标
3:
4: /* 每一次触发moveEvent时记录当前的时间与坐标 */
5: moveEvent=function(){
6: ....
7: disc.push(new Date());
8: disc.push(getMousePoint());
9: ....
10: }
11:
12: endEvent=function(){
13: ....
14: //计算出最近不超过200豪秒内数据
15: var nowTime=new Date(),
16: nowPos=getMousePoint();
17: while(disc[0].length && nowTime-disc[0][0]>200){
18: disc[0].shift();
19: disc[1].shift();
20: }
21: if(disc[0].length){
22: time=nowTime-disc[0][0];//间隔时间
23: offX=nowPos.x-disc[0][1].x;//横向间隔距离
24: ...
25: }
26: ....
27: }
TouchScroll如何使用
使用方法，载入TouchScroll的脚本文件，然后可以通过实例化“TouchScroll”这个类来使用。例如：
1: new TouchScroll({
2: 'id': 'slider',//要处理的容器的id
3: 'width':4,//滚动条宽度
4: 'minLength':20,//滚动条最小长度
5: 'opacity':0.8,//滚动条透明度
6: 'color':'black',//滚动条颜色
7: });
TouchScroll还存在的问题
目前可能还存在一些bug，另外在滚动超出边界后的动画处理也不是很理想，过渡有点生硬。
目前TouchScroll也未提供一些操作接口，我会在日后慢慢完善，包括添加PC上的鼠标滚动支持(已添加)、更多自定义内容等。
目前可以使用的接口:
1: var t1=new TouchScroll();
2: /*容器滚动接口
3: *@param Number offx: 水平方向上滚动offx距离
4: *@param Number offy: 垂直方向上滚动offy距离
5: */
6: t1.scroll(offx,offy);
查看DEMO请点击http://u.boy.im/touchscroll/。可以使用手机浏览器输入地址访问。
DEMO2: http://u.boy.im/touchscroll/scroll.html
查看源代码请点此处。
支持!
