Question

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

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

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

<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>

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

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

滚动条初始化

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

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

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

• 1. auto: ios版本小于6.0.0和android版本小于4.4.0使用js滚动，其他使用native的滚动条
• 2. js: 都使用js的滚动条，不建议选择此选项
• 3. native: 直接使用native的滚动条，如果页面没有复杂的布局（比如 position: absolute或者 translate3D）那么可以选择此类型

上边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. 局部刷新，只针对某个容器的刷新

$(function() {
    $(".content").scroller('refresh');
});

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

$(function() {
    $.refreshScroller();
});

滚动接口

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

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

滚动事件

滚动条提供三个事件：

• 1. scrollStart: 滚动开始时触发（目前只能在js模式下，才会触发）
• 2. scroll: 滚动中触发
• 3. scrollEnd: 滚动结束后触发（目前只能在js模式下，才会触发）

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

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

收藏 0

分享到微信

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。