Question

saber-scroll

为移动端页面提供区域滚动功能

提供元素内容垂直、水平滚动。颗粒化功能，以插件形式提供增强功能，方便组合，文件大小可控

Usage

通过edp引入模块

edp import saber-scroll

var scroll = require('saber-scroll');
var scroller = scroll(document.getElementById('wrapper'));
scroller.on('change', function (e) {
    console.log(e.left, e.top);
});

只滚动区域的第一个子元素，如果想让区域中的所有元素都能滚动请添加包裹元素，比如这样：

<div class="content">
    <div class="wrapper">
        ...
    </div>
</div>

API

scroll(ele, options)

使元素内容可滚动

• ele 内容需要滚动的元素或者对应的id
• options 初始化参数
• options.horizontal 是否可以水平滚动，默认为true
• options.vertical 是否可以垂直滚动，默认为true
• options.overflow 是否可以超出滚动范围，默认为true

滚动条是以插件形式实现的，在使用时除了设置options.scrollbar外，还需要引入saber-scroll/plugin/scrollbar模块

Scroller

scroll()创建的滚动对象

.destroy()

销毁滚动

.on(eventName, callback)

为滚动对象事件，目前支持以下事件

• change：滚动事件，事件参数包含top、left属性，表示滚动的位移

.disable()

禁用区域滚动

.enable()

启动区域滚动

.repaint()

重绘滚动区域，在滚动区域大小修改后使用，重新计算可滚动区域

.scrollTo(args, duration)

滚动到确定位置

• args 滚动位置；变长参数，如果是双向滚动，则为top, left两参数
• duration 缓动时间；单位为秒，默认为0

.scrollToElement(element, duration)

滚动都内部某元素位置

• element DOM元素
• duration 缓动时间；单位为秒，默认为0

.getScrollLeft()

获取水平滚动位移

.getScrollTop()

获取垂直滚动位移

Plugins

插件需要额外引入并设置相应的属性，例如：

var scroll = require('saber-scroll');
// 引入scrollbar插件
require('saber-scroll/plugin/scrollbar');

var scroller = scroll(
        ele,
        {
            // 启用scrollbar插件
            scrollbar: true
        }
    );

目前支持以下插件：

• scrollbar 为滚动区域添加滚动条
• overflowHint 提供到达或者超出滚动范围的提示样式

===