tl-scroll

Chrome	Firefox	Safari	Edge	IE
√	√	√	√	9 √ 10 √ 11 √

还未在移动端进行过测试)

Feature:

• [√] 支持设置滚动条大小
• [√] 支持根据内容变动自动显示隐藏滚动条
• [√] 提供相应滚动事件回调
• [√] 支持动态设定滚动位置

tl-scroll 是干嘛的

tl-scroll是一款基于vue2.0的滚动条插件。

此插件致力解决原生滚动条在不同系统、不同浏览器中的丑陋表现，在保证原生滚动条功能可用的基础上实现了更丰富的功能、保证在所支持的浏览器下展现出风格一致、交互体验一致的滚动条。

它可以让你无需关心滚动条的兼容性问题，无需关心内容区域的宽高，可以根据内容大小自动显示或隐藏滚动条。

安装

1. npm 推荐使用npm，这样可以跟随你的webpack配置去选择怎样打包。

npm i -S tl-scroll

注册组件

1. 全局注册

   <template>
     <tl-scroll>
       <!-- 你的内容 -->
     </tl-scroll>
   </template>
   <script>
    import Vue from 'vue'
    import TlScroll from 'tl-scroll'
    Vue.use(TlScroll)
   </script>

2. 局部注册

   <template>
     <tl-scroll>
       <!-- 你的内容 -->
     </tl-scroll>
   </template>
   <script>
     import { TlScroll } from 'tl-scroll'
     export default {
         name: '',
         components: {TlScroll} //在组件内注册
     }
   </script>

属性

size

• 类型Number

• 默认值6

• 用法:

    <tl-scroll :size="6">
       <!-- 你的内容 -->
    </tl-scroll>

  设置滚动条的大小

overflow-x

• 类型Boolean

• 默认值true

• 用法:

    <tl-scroll :overflow-x="true">
       <!-- 你的内容 -->
    </tl-scroll>

  是否显示横向滚动条

overflow-y

• 类型Boolean

• 默认值true

• 用法:

    <tl-scroll :overflow-y="true">
       <!-- 你的内容 -->
    </tl-scroll>

  是否显示纵向滚动条

z-index

• 类型Number

• 用法:

    <tl-scroll :z-index="9">
       <!-- 你的内容 -->
    </tl-scroll>

  滚动条堆叠顺序。仅控制滚动条，若整个滚动容器需要，可自行在容器上通过样式控制

事件

updated({el, width, height, type})

• 在滚动容器大小或内容区大小改变时调用。

• 参数el

  变动的元素。

• 参数width

  元素变动后的宽度。

• 参数height

  元素变动后的高度。

• 参数type

  变动类型，0：内容部分变动， 1：滚动容器变动。

  <tl-scroll @updated="updated">
       <!-- 你的内容 -->
  </tl-scroll>

scroll(value, dom, type)

• 监听滚动条滚动事件。

• 参数value

  scrollTop 或 scrollLeft

• 参数dom

  当前元素

• 参数type

  0: 竖向滚动； 1：横向滚动

  <tl-scroll @scroll="scroll">
       <!-- 你的内容 -->
  </tl-scroll>

方法

• 说明 滚动至指定位置。通过ref进行调用

scroll(x=0, y=0)

• 根据所传x、y轴数值，滚动至指定位置

scrollLeft(x)

• 横向滚动条滚动至指定位置，无参时则返回当前所在的滚动位置

scrollTop(y)

• 纵向滚动条滚动至指定位置，无参时则返回当前所在的滚动位置

更新日志:

• [ 1.2.3 ] 滚动区大小改变时，记录并恢复原滚动位置
• [ 1.2.2 ] 关闭横向滚动条时，内容区域宽度100%展示
• [ 1.2.1 ] 修复组件内部无法使用父级宽度百分比问题
• [ 1.2.0 ] 修复组件局部注册失败问题
• [ 1.1.3 ] updated事件添加防抖处理
• [ 1.1.2 ] 新增 z-index 属性；scrollLeft、scrollTop 方法支持获取当前滚动位置
• [ 1.1.1 ] 新增 overflow-y 和 overflow-x 属性
• [ 1.1.0 ] 修复 updated 事件中参数数值错误问题
• [ 1.0.1 ] 基础正式版
• [ 1.0.0 ] 测试版本