Question

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

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

Installation

通过 edp 引入模块：

edp import saber-scroll

Usage

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

• Methods
• Classes
• Plugins

Methods

scroll(ele[, options])

使元素内容可滚动

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

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

Classes

• Scroller scroll()创建的滚动对象

Plugins

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

插件用于丰富功能，需要额外引入并设置相应的属性，例如：

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

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