返回介绍

saber-scroll v0.1.1-beta.1

发布于 2023-10-15 20:10:06 字数 1829 浏览 0 评论 0 收藏 0

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.scrollbar 是否显示滚动条,默认为false
  • options.horizontal 是否可以水平滚动,默认为true
  • options.vertical 是否可以垂直滚动,默认为true

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

Scroller

scroll()创建的滚动对象

.destroy()

销毁滚动

.on(eventName, callback)

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

  • change:滚动事件,事件参数包含topleft属性,表示滚动的位移

.repaint()

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

.scrollTo(args, duration)

滚动到确定位置

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

.getScrollLeft()

获取水平滚动位移

.getScrollTop()

获取垂直滚动位移

===

Saber

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

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文