IScroll的使用-方向键绑定&自定义滚动条样式

之前在webkit上开发一个滚动控件，需要完成的是一段文字，上下键可以滚动，且自定义滚动条。第一想法就是浏览器原生overflow：scroll，且webkit支持自定义滚动条样式：

webkit自定义滚动条样式：

后来换了个引擎，发现其他引擎不支持自定义滚动条，那就满足不了UED的要求了。来同事推荐使用IScroll，用了一下，确实比较方便，与平台无关，可操作的属性还有性能都很理想，记录一下：

首先看官方文档 https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/versions.html

github地址：https://github.com/cubiq/iscroll

demo：http://cubiq.org/dropbox/iscroll4/examples/simple/

直接拿demo中的iscroll.js套到自己的工程上，一个段落就是一个li，new 一下就完事了，滚动拖动也很happy。然后发现，我按上下方向键没有响应。

IScroll按键事件绑定：

查源码看iscroll的事件处理，都在handleEvent函数里面

根本就没有keyEvent，看来偷懒是不行的，官方文档看一下，原来iscroll有5个版本，各自平台都是不一样的，demo中这个估计是移动平台用的iscroll-lite版本，移动平台根本不鸟方向键的。

去github上down下来源码，找了找，build目录下，5个版本都有。用最原始的common版本，这个版本的handleEvent就丰富多了：

然后套用上去，可以支持方向键了。中间遇到两个小问题，第一个是按键一直没反应，检查下是z-index太小，keyEvent被上层元素拿走了；第二个是只有在#warpper拿到focus的时候才响应按键，但我用的引擎不支持focus，这个也不难，页面强行绑定handleEvent：

然后整个页面随便按什么键，都可以响应了。接下来就是滚动条样式的问题了，这个也简单，跟着官方文档&样例走就行

http://lab.cubiq.org/iscroll5/demos/styled-scrollbars/

关键步骤有三个：

1.option

设置了scrollbars: 'custom'，在页面的Elements就可以找到

<div class="iScrollVerticalScrollbar iScrollLoneScrollbar" ></div>

里面还包含了

<div class="iScrollIndicator" ></div>

第一个是滚动区域，第二个是滚动条。拿到Element就好办了，css给定样式：

大功告成！

当然，IScroll不止这点功能，官方文档后面还有无限滚动等高级用法，以后用到再添加。