Skip to content

okyping/saber-scroll

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

saber-scroll

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

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

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

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

Plugins

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

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

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

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

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 62.6%
  • HTML 37.4%