为移动端页面提供区域滚动功能
为移动端页面提供区域滚动功能
提供元素内容垂直、水平滚动。颗粒化功能,以插件形式提供增强功能,方便组合,文件大小可控
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
模块
插件用于丰富功能,需要额外引入并设置相应的属性,例如:
var scroll = require('saber-scroll'); // 引入scrollbar插件 require('saber-scroll/plugin/scrollbar'); var scroller = scroll( ele, { // 启用scrollbar插件 scrollbar: true } );
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。