滚动条

因为部分低版本安卓机型上,如果一个容器通过 position: absolute; 或者 transform: translate3d(x,x,x); 定位,那么在滚动的时候有可能会出现闪烁问题。

为了解决这种bug,我们实现了原生滚动和JS滚动条两种模式,并且可以自由切换。从 v0.3.1 版本开始,默认的滚动条类型就是 "native" ,即默认使用系统原生滚动条。只有当你发现页面存在滚动闪烁的问题无法解决时,才建议使用 js 滚动条。

为了保证页面在任何滚动条模式下都能使用,强烈建议在任何导致页面高度变化的操作之后都要执行一次 $.refreshScroller() 操作。否则在js滚动条模式下可能会导致页面没有重现计算高度而无法滚动。

{% highlight html %}

滚动条

滚动方式

滚动具有三种模式:

  • 1. auto模式: scroller.js 根据系统版本号来决定什么时候使用js的滚动(默认)
  • 2. js模式: 总是使用js滚动(即IScroll)
  • 3. native模式: 总是使用原生滚动条
滚动方式

滚动具有三种模式:

  • 1. auto模式: scroller.js 根据系统版本号来决定什么时候使用js的滚动(默认)
  • 2. js模式: 使用js滚动
  • 3. native模式: 总是使用原生滚动条
滚动方式

滚动具有三种模式:

  • 1. auto模式: scroller.js 根据系统版本号来决定什么时候使用js的滚动(默认)
  • 2. js模式: 使用js滚动
  • 3. native模式:总是使用原生滚动条
{% endhighlight %}

js 模式是为了解决一些原生滚动条下很难解决的问题。如果你的页面内容比较简单,没有用到幻灯片、滑动删除等复杂的组件,完全不需要使用 js 模式。并且JS模式滚动性能是比原生滚动条差的。

注意,在 js 模式下,或者 auto模式自动切换到js模式下,如果你的 .content 中不存在 .content-inner,那么JS滚动条会自动增加一个 .content-inner容器用来滚动页面,这会导致 .content 中所有的元素都被重写一遍,这个重写操作是在 pageInit 事件触发之前就完成了。你可以自己在 .content 容器下面再套一层 .content-inner容器来防止重写html。

滚动条初始化

一般情况下你不需要自行初始化滚动条,因为 $.init()方法会自动初始化滚动条。如果你希望自行初始化,可以这样:

{% highlight js %} $(function() { $(".content").scroller({ type: 'js' }); }); {% endhighlight %}

滚动的方式可以通过配置项 type 来进行配置:

上边demo使用的是javascript接口的调用方式,scroller.js 同时提供data-api的模式。通过添加标签属性 data-toggle="scroller"。 滚动类型通过:data-type="auto"来配置。

你可以在 .content 容器上通过 data-type='native' 指定在当前页面使用原生滚动条。

注意: scroller 插件会页面载入完成后,默认初始化带有class.content或者属性data-toggle="scroller"的元素为auto模式的滚动条。如果想要.content的元素全部初始为js的模式,需要在.content 标签加上属性data-type="js"

重置滚动

在js模式下,滚动区域高度发生变化时,需要对滚动条进行刷新,scroller 提供两种方式来进行刷新:

1. 局部刷新,只针对某个容器的刷新

{% highlight js %} $(function() { $(".content").scroller('refresh'); }); {% endhighlight %}

2. 全局刷新,会刷新页面上所有的滚动条

{% highlight js %} $(function() { $.refreshScroller(); }); {% endhighlight %}

滚动接口

scroller插件重置的了zepto的滚动方法,无论在js模式下或者native模式下都是一样的调用方式:

{% highlight js %} $(function() { $('.content').scrollTop(); //==> number $('.content').scrollTop(number); // ==>self $('.content').scrollLeft(); //==> number $('.content').scrollLeft(number); // ==>self }); {% endhighlight %}

滚动事件

滚动条提供三个事件:

直接通过下边的方式进行监听

{% highlight js %} $(function() { $(".content").on('scrollStart',function(){ //dosomething }); }); {% endhighlight %}