vue-ohyeah-scroll v0.5.6

vue-ohyeah-scroll

仿 MAC 系统的滚动条

PC 端，移动端都能用

重构待测/未来计划

1. 测嵌套 👌
2. 触发各事件 👌
3. 平滑滚动 👌
4. 锚点跳转 👌
5. 键盘事件 👌
6. 变颜色，换位置，随机改变大小 👌
7. 各方法测试 👌
8. safari 多次触发触底触顶事件 👌
9. 整理代码 👌
10. padding 2px 👌
11. firefox scrollTo 滚动到顶部 模拟滚动条没动 👌 firefox 不触发 scroll 事件
12. IE11 轨道上点击，位置没对 👌 IE11 不支持 Number.isFinite
13. 轨道上点击 needSmooth 问题 👌
14. 移动端不渲染，样式还原 👌
15. scrollTo 兼容不支持原生平滑的浏览器
16. 自动隐藏true时，不滚动过一段时间自动隐藏

特性

• 默认是 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="oh1">
    ...
  </Ohyeah>
</template>

<script>
export default {
  methods: {
    scrollTo() {
      // 水平保持原位，垂直滚到100px处，平滑过度
      this.$refs.oh1.scrollTo(null, 100, true);
    },
    scrollToEnd() {
      // 水平滚到最左边，垂直滚到底，瞬间完成
      this.$refs.oh1.scrollTo(0, "end", false);
    },
    getScrollInfo() {
      // 获取当前滚动条各种信息
      const msg = this.$refs.oh1.getScrollInfo();
      /**
       * height: 内容区可见高度,不包括边框
       * width: 内容区可见宽度,不包括边框
       * clientHeight: 同height,
       * clientWidth: 同width,
       * offsetHeight: 内容区高度,包括边框
       * offsetWidth: 内容区宽度，包括边框,
       * scrollTop: 内容区已被滚到上边去的距离,
       * scrollLeft: 内容区已被滚到左边去的距离,
       * scrollHeight: 内容区真实总高度,包括看不见的区域
       * scrollWidth: 内容区真实总宽度,包括看不见的区域
       * */
    },
  },
};
</script>

完整例子

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

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

注意事项

1.

scrollTo(x,y,isSmooth) 方法 平滑滚动使用的是scroll-behavior: smooth;,目前chrome,firefox,opera支持 > 但是：浏览器水平滚动条和垂直滚动条是互斥的，当水平正在滚时，垂直滚不动，反之亦然。浏览器始终只会有一个方向处于滚动中 > 所以：如果设置了isSmooth为true,那么不要同时设置 x 和 y,至少有一个应该为null

2.

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

更新

• 0.5.x 重构了,现在基于原生滚动条的默认行为