vue-ohyeah-scroll v0.5.2-beta2

vue-ohyeah-scroll

仿 MAC 系统的滚动条

主要在 PC 端使用，如果检测到是移动端，会直接使用原生滚动条，ohyeah-scroll 不会进行初始化

重构待测

1. 测嵌套 👌
2. 触发各事件 👌
3. 平滑滚动
4. 锚点跳转 👌
5. 键盘事件 👌
6. 变颜色，换位置，随机改变大小 👌
7. 各方法测试 👌
8. safari 多次触发触底触顶事件 👌
9. 整理代码 👌
10. padding 2px 👌

特性

• 默认是 MAC 系统的主题，也可以自定义轨道和滑块颜色
• 可以设置滚动条显示在左边或上面
• 自动显隐滚动条
• 动态手动设置滚动条的 scrollTop 和 scrollLeft
• 支持一键滚动到底部
• 内容随意增减，父级容器随便改变大小
• 支持嵌套

效果预览

https://isluo.com/work/vue-ohyeah-scroll/

安装

  yarn add vue-ohyeah-scroll

使用

全局注册

import Ohyeah from 'vue-ohyeah-scroll';
Vue.use(Ohyeah);

局部注册

import { Ohyeah } from 'vue-ohyeah-scroll';

export default {
  components: {
    Ohyeah,
  },
};

组件中使用

<template>
  <ohyeah width="100vw" height="100vh">
    ...
  </ohyeah>
</template>

自定义属性

自定义事件

自身方法

如何使用自身方法：

  <template>
    <!-- 需要定义一个ref -->
    <ohyeah ref="ohyeah">
      ...
    </ohyeah>
  </template>

  <script>
    export default {
      methods:{
        scrollTo(){
          // 水平保持原位，垂直滚100个像素，在300ms内完成
          this.$refs.ohyeah.scrollTo(null, 100, 300);
        },
        scrollToEnd(){
          // 水平滚到最左边，垂直滚到底，瞬间完成
          this.$refs.ohyeah.scrollTo(0, 'end', 0);
        },
        getScrollInfo(){
          // 获取当前滚动条各种信息
          const msg = this.$refs.ohyeah.getScrollInfo();
          /**
           * offsetHeight: 内容区的总高度,
           * offsetWidth: 内容区的总宽度,
           * height: 容器的高度,
           * width: 容器的宽度,
           * scrollTop: 内容区已被滚到上边去的距离,
           * scrollLeft: 内容区已被滚到左边去的距离
           * */
        }
      }
    }
  </script>

完整例子

  <template>
    <!-- 若不设置ohyeah的width和height, 则需要一个具有高度和宽度的容器来包裹ohyeah -->
    <div style="height:100vh; width:50%;">
      <ohyeah
        :autoHide="false"
        @onVerStart="console.log('到顶了')"
      >
        <div v-for="(item,index) in testData" :key="index">{{index}}</div>
      </ohyeah>
    </div>
  </template>

  <script>
    import { Ohyeah } from "vue-ohyeah-scroll";
    export default {
      data(){
        return {
          testData: new Array(100).fill("")
        }
      }
      components:{
        Ohyeah
      }
    }
  </script>

注意事项

• 如果你不设置ohyeah的width和height属性，或者设置为百分比，
• 那么就需要一个具有高度和宽度的父级元素来包裹ohyeah

更新

• 0.4.0 增加了键盘方向键控制
• 0.3.0 this.$refs.ohyeah.scrollTo(null, 100); 传递null表示保持原位不动
• 0.2.9 处理了一下nuxt.js中使用的情况。修复了卸载组件时没有正确卸载容器监听的方法
• 2019/05/09 处理了嵌套滚动条的事件冒泡问题

  原生滚动条（子）和ohyeah（父）嵌套时，原生滚动条需要设置@wheel.stop, todo: 目前的方案不完美，待升级