Nova PhoneGap框架 第八章 滚动条

你可能会疑惑为什么滚动条这么常见的功能会在这里单独列出，但如果你有过PhoneGap开发经验的话，你就会发现要在Android 2.3 里面实现滚动条那真不是一件容易的事。

 

8.1 概述

目前主流的PhoneGap框架或者库都花了很大的力气来实现滚动条，比如jQueryMobile， Sencha Touch，KendoUI，Intel App Framework (以前叫jqMobi)，甚至还有一个专门只做滚动条而变得很出名的iScroll。

 

出现滚动条百家争鸣的原因是，低版本的Android和iOS不支持CSS样式overflow: scroll。于是才会写JS来处理触摸三事件。

 

我们的框架也处理了滚动条，因此可以运行于低版本的Android和iOS设备。跟其他主流的PhoneGap框架不一样，我们的滚动条只用了很少的代码就实现了，这是因为得益于我们有固定尺寸的div#body，而其他框架都不会去要求程序员这样设计HTML。当你越多的使用我们的框架，做的程序越复杂，你就会发现固定尺寸的div#body会给你带来意想不到的惊喜，这些都是其他框架无法比拟的。

 

在我们的框架下使用滚动条也非常简单，通常只需要一行代码，如：new nova.Scroller("#content").init(); 如果你需要对这个scroller进行配置，那么在调用scroller实例的init方法前，可以设置scroller的相关属性。目前支持的特性包括：

l  横向滚动

l  纵向滚动

l  嵌套的滚动

 

8.2 已知问题

尽管我们通过触摸三事件实现了滚动条，但是这个滚动条对于表单的兼容性不好。滚动条和表单元素的兼容性也是所有其他滚动条的痛处，到现在为止，我还没有发现哪一家的滚动条能够完美兼容表单。

 

我们框架在滚动功能和表单元素的功能取舍上，牺牲了部分滚动功能，而让表单元素的功能更加强壮。这句话说得很抽象，实现的效果就是，所有表单元素会正常工作，但是滚动触摸的起点不能在表单元素上，也就是说，你不能把手指按住一个textbox然后再下拉滚动页面。