Nervously Practice Multithreading

    @axe/scroller

    0.2.4 • Public • Published

    模拟滚动

    version

    移动端模拟滚动代替原生滚动,用于解决原生滚动不好支持的业务场景。

    开始安装

    npm install @axe/scroller

    如何使用

    <div id="root">
      <div className="scroller">
        <p>This is text</p>
        <p>This is text</p>
        <p>This is text</p>
        <p>This is text</p>
        <p>This is text</p>
        <p>This is text</p>
        ......
        <p>This is text</p>
      </div>
    </div>
    import Scroller from '@axe/scroller'
     
    const rootEl = document.getElementById('root')
     
    rootEl.style.height = '100%'
    rootEl.style.overflow = 'hidden'
     
    const scroller = new Scroller(rootEl, {})
     
    scroller.on('scrollstart', info => {
      console.info('scrollstart', info)
    })
     
    scroller.on('scroll', info => {
      console.info('scroll', info)
    })
     
    scroller.on('scrollend', info => {
      console.info('scrollend', info)
    })

    API

    options

    const scroller = new Scroller(el, options)
    
    • el:滚动容器(设置滚动的高度),至少包含一个子节点(实际的内容区,也是滚动操作的对象,默认取第一个子节点)
    • options:配置选项,如下
    const defaults = {
      scrollEl: null, // [string, element] 自定义滚动的内容区,默认取容器中的第一个子节点
     
      startY: 0, // 设置滚动的初识位置
     
      gpu: true, // 是否开启gpu渲染
      click: true, // 是否需要绑定click事件
      resizeTime: 100, // 手机横竖屏切换时,重新计算滚动范围的延迟时间
      touchToWrapper: false, // 是否将touch事件绑定在滚动容器中,默认绑定在window对象,这样当手指离开容器时还可以继续滚动,这是我们期望的
      loadRefresh: true, // window.onload后计算滚动范围,在一开始可能样式、图片等资源未加载完成,此时的高度是不准确的
     
      preventDefault: true, // touch时阻止默认行为
      preventDefaultException: { // 表单、超链接等默认行为是需要的,因此排除在外,当然你还可以根据DOM的其他属性进行正则匹配,排除不需要阻止默认行为的节点
        tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/
      },
     
      stopPropagation: false, // 阻止冒泡
     
      momentum: true, // 开启惯性滚动
      momentumDuration: 2500, // 惯性滚动过渡时间,单位:ms,其它时间的单位同理
      momentumBounceDuration: 500, // 超出边界的回弹过渡时间
      momentumLimitTime: 300, // 限制惯性滚动触发的最小时间,注意这个时间是在移动过程中的一个片段,假如刚开始缓慢移动,后来快速移动,那我们捕捉的是后面的操作,认为其可以触发惯性滚动
      momentumLimitDistance: 15, // 限时惯性滚动的最小移动距离,同上,也是移动时的一个片段
      deceleration: 0.0015, // 惯性滚动时,减速阶段的加速度,值越大,停止的越快,一般不需要修改默认值
     
      bounce: true, // 是否开启边界回弹
      bounceRate: 1.5, // 回弹的比率,数值越小,回弹的越远
      bounceDuration: 800, // 回弹的过渡时间
      bounceLimitDistance: 1000, // 回弹的最远距离
     
      scrollbar: true, // 是否开启滚动指示器(在滚动区域右侧)
     
      pulltopLimitDistance: 100, // 顶部下拉回弹的停留距离
      pullbottomLimitDistance: 100 // 底部上拉回弹的停留距离
    }

    实例的属性:

    this.minScrollY = 0 // 最小滚动位置,超出则回弹
    this.maxScrollY = 0 // 最大滚动位置,默认为滚动节点的高度,超出则回弹
     
    this.y = 0 // 当前滚动位置
    this.previousY = 0 // 上一次的滚动位置
    this.pointY = 0 // 记录touch过程的位置
     
    this.startTime = 0 // 记录momentum时间点
    this.startY = 0 // 记录momentum位置
     
    this.endTime = 0 // touchend时的时间点
     
    this.relativeY = 0 // 相对于视窗的位置
     
    // 方向:从下往上(向上滑)为负数, 从上往下(向下滑)为正数
    this.distanceY = 0 // 记录touch过程中移动的距离
    this.movingDistanceY = 0 // 滑动过程中的距离

    methods

    • getLiveY:获取当前的滚动位置
    • stop:停止正在进行的惯性滚动
    • enable:开启滚动
    • disable:禁用滚动
    • destroy:销毁滚动及其绑定的事件
    • on(event, fn):注册事件
    • off(event, fn):销毁事件
    • trigger(event, info):主动触发注册的事件
    • refresh:刷新滚动
    • refreshAfterImgLoaded(imgs):等待图片加载完成后再刷新,imgs可以是string、element或者[string|element]
    • setScroll(min, max):手动设置滚动访问
    • setScrollByElement(el):根据节点设置滚动范围
    • resetScroll(duration, easeStyle):若超出边界则回弹
    • scrollTo(y, duration, easeStyle):滚动到指定位置
    • scrollToElement(el, duration, valign, easeStyle):滚动到指定节点的位置,其中valign有top、middle、bottom3个值,表示滚动到节点的什么位置
    • scrollByOffset(distance, duration, easeStyle):相对于当前的位置进行偏移滚动
    • pulltopDone(options):顶部下拉加载完成时调用,以免重复加载,options:reset(加载完成后若超出边界则回弹)、refresh(加载完成后刷新滚动)、needLoadImgs(有新图片加入,等待其加载完成后刷新)、onHide(边界回弹结束后触发方法)
    • pullbottomDone(options):底部上拉加载完成时调用,以免重复加载,参数同上

    备注

    easeStyle:

    内置有:

    • swipe
    • bounce
    • swipeBounce

    也可以是:

    • ease
    • ease-in
    • ease-out
    • ease-in-out
    • ...

    events

    通过on注册的事件有:

    • refresh:刷新滚动后触发

    • touchstart:手指触摸屏幕时触发

    • touchmove:手指在屏幕上移动时触发

    • touchend:手指离开屏幕时触发

    • scrollstart:滚动开始时触发

    • scroll:滚动中触发

    • scrollend:滚动结束时触发

    • pulltopstart:顶部下拉生效时触发

    • pulltopcancel:顶部下拉取消

    • pulltop:顶部下拉加载中,加载完成后需要调用pulltopDone

    • pullbottomstart:底部上拉生效时触发

    • pullbottomcancel:底部上拉取消

    • pullbottom:底部上拉加载中,加载完成后需要调用pullbottomDone

    环境配置

    构建工具

    $ npm install -g fle-cli
     
    # yarn
    $ yarn global add fle-cli

    命令说明

    # 本地开发 
    fle dev
     
    # 代码构建 
    fle build

    查看更多说明: 构建文档

    Install

    npm i @axe/scroller

    DownloadsWeekly Downloads

    0

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    39.6 kB

    Total Files

    17

    Last publish

    Collaborators

    • ansenhuang