<article class="component active " id="scroller">
    <h2 class="component-title">滚动条</h2>
    <p>因为部分低版本安卓机型上，如果一个容器通过 <code>position: absolute;</code> 或者 <code>transform: translate3d(x,x,x);</code> 定位，那么在滚动的时候有可能会出现闪烁问题。</p>
    <p>为了解决这种bug，我们实现了原生滚动和JS滚动条两种模式，并且可以自由切换。从 v0.3.1 版本开始，默认的滚动条类型就是 "native" ，即默认使用系统原生滚动条。只有当你发现页面存在滚动闪烁的问题无法解决时，才建议使用 js 滚动条。</p>
    <p class="component-description">
      为了保证页面在任何滚动条模式下都能使用，强烈建议在任何导致页面高度变化的操作之后都要执行一次 <code>$.refreshScroller()</code> 操作。否则在js滚动条模式下可能会导致页面没有重现计算高度而无法滚动。
    </p>
    <div class="component-example component-example-fullbleed">
    </div>
    {% highlight html %}

    <header class="bar bar-nav">
        <h1 class="title">滚动条</h1>
    </header>
    <div class="content">
        <div class="card">
            <div class="card-header">滚动方式</div>
            <div class="card-content">
                <div class="card-content-inner">
                    <h3>滚动具有三种模式：</h3>
                    <ul>
                        <li>1. auto模式: scroller.js 根据系统版本号来决定什么时候使用js的滚动（默认）</li>
                        <li>2. js模式: 总是使用js滚动（即IScroll）</li>
                        <li>3. native模式： 总是使用原生滚动条</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">滚动方式</div>
            <div class="card-content">
                <div class="card-content-inner">
                    <h3>滚动具有三种模式：</h3>
                    <ul>
                        <li>1. auto模式: scroller.js 根据系统版本号来决定什么时候使用js的滚动（默认）</li>
                        <li>2. js模式: 使用js滚动</li>
                        <li>3. native模式： 总是使用原生滚动条</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">滚动方式</div>
            <div class="card-content">
                <div class="card-content-inner">
                    <h3>滚动具有三种模式：</h3>
                    <ul>
                        <li>1. auto模式: scroller.js 根据系统版本号来决定什么时候使用js的滚动（默认）</li>
                        <li>2. js模式: 使用js滚动</li>
                        <li>3. native模式：总是使用原生滚动条</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    {% endhighlight %}
    <p><code>js</code> 模式是为了解决一些原生滚动条下很难解决的问题。如果你的页面内容比较简单，没有用到幻灯片、滑动删除等复杂的组件，完全不需要使用 <code>js</code> 模式。并且JS模式滚动性能是比原生滚动条差的。</p>
    <p>注意，在 <code>js</code> 模式下，或者 <code>auto</code>模式自动切换到js模式下，如果你的 <code>.content</code> 中不存在 <code>.content-inner</code>，那么JS滚动条会自动增加一个 <code>.content-inner</code>容器用来滚动页面，这会导致 <code>.content</code> 中所有的元素都被重写一遍，这个重写操作是在 <code>pageInit</code> 事件触发之前就完成了。你可以自己在 <code>.content</code> 容器下面再套一层 <code>.content-inner</code>容器来防止重写html。</p>
    <h3 class="component-title">滚动条初始化</h3>
    <p class="component-description">
        一般情况下你不需要自行初始化滚动条，因为 <code>$.init()</code>方法会自动初始化滚动条。如果你希望自行初始化，可以这样：
    </p>
    {% highlight js %} 
$(function() {
    $(".content").scroller({
        type: 'js'
    });
});   
    {% endhighlight %}

    <p class="component-description">
        滚动的方式可以通过配置项 type 来进行配置：
        <ul>
            <li>1. auto: ios版本小于6.0.0和android版本小于4.4.0使用js滚动，其他使用native的滚动条</li>
            <li>2. js: 都使用js的滚动条，不建议选择此选项</li>
            <li>3. native: 直接使用native的滚动条，如果页面没有复杂的布局（比如 position: absolute或者 translate3D）那么可以选择此类型</li>
        </ul>
    </p>
    <p class="component-description">
        上边demo使用的是javascript接口的调用方式，scroller.js 同时提供data-api的模式。通过添加标签属性
        <code>data-toggle="scroller"</code>。 滚动类型通过：<code>data-type="auto"</code>来配置。
    </p> 
    <p>你可以在 <code>.content</code> 容器上通过 <code>data-type='native'</code> 指定在当前页面使用原生滚动条。</p>
    <p class="component-description">
        注意： scroller 插件会页面载入完成后，默认初始化带有class<code>.content</code>或者属性<code>data-toggle="scroller"</code>的元素为auto模式的滚动条。如果想要<code>.content</code>的元素全部初始为js的模式，需要在.content 标签加上属性<code>data-type="js"</code>
    </p>
    <h3 class="component-title">重置滚动</h3>
     <p class="component-description">在js模式下，滚动区域高度发生变化时，需要对滚动条进行刷新，scroller 提供两种方式来进行刷新：</p>
     <p class="component-description">1. 局部刷新，只针对某个容器的刷新</p>
        {% highlight js %} 
$(function() {
    $(".content").scroller('refresh');
});   
    {% endhighlight %}
    <p class="component-description">2. 全局刷新，会刷新页面上所有的滚动条</p>
        {% highlight js %} 
$(function() {
    $.refreshScroller();
});   
    {% endhighlight %}
    
    <h3 class="component-title">滚动接口</h3>
    <p class="component-description">scroller插件重置的了zepto的滚动方法，无论在js模式下或者native模式下都是一样的调用方式：</p>
        {% highlight js %} 
$(function() {
    $('.content').scrollTop(); //==> number
    $('.content').scrollTop(number); // ==>self
    $('.content').scrollLeft(); //==> number
    $('.content').scrollLeft(number); // ==>self
});   
    {% endhighlight %}
<h3 class="component-title">滚动事件</h3>
    <div class="component-description">
        滚动条提供三个事件：
        <ul>
          <li>1. <code>scrollStart</code>: 滚动开始时触发（目前只能在js模式下，才会触发）</li>
          <li>2. <code>scroll</code>: 滚动中触发</li>
          <li>3. <code>scrollEnd</code>: 滚动结束后触发（目前只能在js模式下，才会触发）</li>
        </ul>

    </div>
    <p class="component-description">
        直接通过下边的方式进行监听
    </p>
    {% highlight js %} 
$(function() {
    $(".content").on('scrollStart',function(){
     //dosomething
    });
});   
    {% endhighlight %}   

</article>



