Mojo UI

Appearance

Scrollbar 滚动条 ​

MoScrollbar 用于给指定滚动容器叠加自定义垂直滚动条。通过 target 绑定滚动容器，默认隐藏原生滚动条。

基础用法 ​

Light
任务 1这是一条用于展示滚动区域的内容，当前序号为 1。
任务 2这是一条用于展示滚动区域的内容，当前序号为 2。
任务 3这是一条用于展示滚动区域的内容，当前序号为 3。
任务 4这是一条用于展示滚动区域的内容，当前序号为 4。
任务 5这是一条用于展示滚动区域的内容，当前序号为 5。
任务 6这是一条用于展示滚动区域的内容，当前序号为 6。
任务 7这是一条用于展示滚动区域的内容，当前序号为 7。
任务 8这是一条用于展示滚动区域的内容，当前序号为 8。
任务 9这是一条用于展示滚动区域的内容，当前序号为 9。
任务 10这是一条用于展示滚动区域的内容，当前序号为 10。
任务 11这是一条用于展示滚动区域的内容，当前序号为 11。
任务 12这是一条用于展示滚动区域的内容，当前序号为 12。
任务 13这是一条用于展示滚动区域的内容，当前序号为 13。
任务 14这是一条用于展示滚动区域的内容，当前序号为 14。
任务 15这是一条用于展示滚动区域的内容，当前序号为 15。
任务 16这是一条用于展示滚动区域的内容，当前序号为 16。
任务 17这是一条用于展示滚动区域的内容，当前序号为 17。
任务 18这是一条用于展示滚动区域的内容，当前序号为 18。
Dark
任务 1这是一条用于展示滚动区域的内容，当前序号为 1。
任务 2这是一条用于展示滚动区域的内容，当前序号为 2。
任务 3这是一条用于展示滚动区域的内容，当前序号为 3。
任务 4这是一条用于展示滚动区域的内容，当前序号为 4。
任务 5这是一条用于展示滚动区域的内容，当前序号为 5。
任务 6这是一条用于展示滚动区域的内容，当前序号为 6。
任务 7这是一条用于展示滚动区域的内容，当前序号为 7。
任务 8这是一条用于展示滚动区域的内容，当前序号为 8。
任务 9这是一条用于展示滚动区域的内容，当前序号为 9。
任务 10这是一条用于展示滚动区域的内容，当前序号为 10。
任务 11这是一条用于展示滚动区域的内容，当前序号为 11。
任务 12这是一条用于展示滚动区域的内容，当前序号为 12。
任务 13这是一条用于展示滚动区域的内容，当前序号为 13。
任务 14这是一条用于展示滚动区域的内容，当前序号为 14。
任务 15这是一条用于展示滚动区域的内容，当前序号为 15。
任务 16这是一条用于展示滚动区域的内容，当前序号为 16。
任务 17这是一条用于展示滚动区域的内容，当前序号为 17。
任务 18这是一条用于展示滚动区域的内容，当前序号为 18。
vue
<script setup lang="ts">
import { ref } from "vue";

const panelRef = ref<HTMLElement>();
</script>

<template>
  <div ref="panelRef" class="panel">
    ...
  </div>

  <MoScrollbar :target="panelRef" />
</template>

常显滚动条 ​

Light
任务 1这是一条用于展示滚动区域的内容，当前序号为 1。
任务 2这是一条用于展示滚动区域的内容，当前序号为 2。
任务 3这是一条用于展示滚动区域的内容，当前序号为 3。
任务 4这是一条用于展示滚动区域的内容，当前序号为 4。
任务 5这是一条用于展示滚动区域的内容，当前序号为 5。
任务 6这是一条用于展示滚动区域的内容，当前序号为 6。
任务 7这是一条用于展示滚动区域的内容，当前序号为 7。
任务 8这是一条用于展示滚动区域的内容，当前序号为 8。
任务 9这是一条用于展示滚动区域的内容，当前序号为 9。
任务 10这是一条用于展示滚动区域的内容，当前序号为 10。
任务 11这是一条用于展示滚动区域的内容，当前序号为 11。
任务 12这是一条用于展示滚动区域的内容，当前序号为 12。
任务 13这是一条用于展示滚动区域的内容，当前序号为 13。
任务 14这是一条用于展示滚动区域的内容，当前序号为 14。
任务 15这是一条用于展示滚动区域的内容，当前序号为 15。
任务 16这是一条用于展示滚动区域的内容，当前序号为 16。
任务 17这是一条用于展示滚动区域的内容，当前序号为 17。
任务 18这是一条用于展示滚动区域的内容，当前序号为 18。
Dark
任务 1这是一条用于展示滚动区域的内容，当前序号为 1。
任务 2这是一条用于展示滚动区域的内容，当前序号为 2。
任务 3这是一条用于展示滚动区域的内容，当前序号为 3。
任务 4这是一条用于展示滚动区域的内容，当前序号为 4。
任务 5这是一条用于展示滚动区域的内容，当前序号为 5。
任务 6这是一条用于展示滚动区域的内容，当前序号为 6。
任务 7这是一条用于展示滚动区域的内容，当前序号为 7。
任务 8这是一条用于展示滚动区域的内容，当前序号为 8。
任务 9这是一条用于展示滚动区域的内容，当前序号为 9。
任务 10这是一条用于展示滚动区域的内容，当前序号为 10。
任务 11这是一条用于展示滚动区域的内容，当前序号为 11。
任务 12这是一条用于展示滚动区域的内容，当前序号为 12。
任务 13这是一条用于展示滚动区域的内容，当前序号为 13。
任务 14这是一条用于展示滚动区域的内容，当前序号为 14。
任务 15这是一条用于展示滚动区域的内容，当前序号为 15。
任务 16这是一条用于展示滚动区域的内容，当前序号为 16。
任务 17这是一条用于展示滚动区域的内容，当前序号为 17。
任务 18这是一条用于展示滚动区域的内容，当前序号为 18。
vue
<MoScrollbar :target="panelRef" always />

尺寸和偏移 ​

Light
任务 1这是一条用于展示滚动区域的内容，当前序号为 1。
任务 2这是一条用于展示滚动区域的内容，当前序号为 2。
任务 3这是一条用于展示滚动区域的内容，当前序号为 3。
任务 4这是一条用于展示滚动区域的内容，当前序号为 4。
任务 5这是一条用于展示滚动区域的内容，当前序号为 5。
任务 6这是一条用于展示滚动区域的内容，当前序号为 6。
任务 7这是一条用于展示滚动区域的内容，当前序号为 7。
任务 8这是一条用于展示滚动区域的内容，当前序号为 8。
任务 9这是一条用于展示滚动区域的内容，当前序号为 9。
任务 10这是一条用于展示滚动区域的内容，当前序号为 10。
任务 11这是一条用于展示滚动区域的内容，当前序号为 11。
任务 12这是一条用于展示滚动区域的内容，当前序号为 12。
任务 13这是一条用于展示滚动区域的内容，当前序号为 13。
任务 14这是一条用于展示滚动区域的内容，当前序号为 14。
任务 15这是一条用于展示滚动区域的内容，当前序号为 15。
任务 16这是一条用于展示滚动区域的内容，当前序号为 16。
任务 17这是一条用于展示滚动区域的内容，当前序号为 17。
任务 18这是一条用于展示滚动区域的内容，当前序号为 18。
Dark
任务 1这是一条用于展示滚动区域的内容，当前序号为 1。
任务 2这是一条用于展示滚动区域的内容，当前序号为 2。
任务 3这是一条用于展示滚动区域的内容，当前序号为 3。
任务 4这是一条用于展示滚动区域的内容，当前序号为 4。
任务 5这是一条用于展示滚动区域的内容，当前序号为 5。
任务 6这是一条用于展示滚动区域的内容，当前序号为 6。
任务 7这是一条用于展示滚动区域的内容，当前序号为 7。
任务 8这是一条用于展示滚动区域的内容，当前序号为 8。
任务 9这是一条用于展示滚动区域的内容，当前序号为 9。
任务 10这是一条用于展示滚动区域的内容，当前序号为 10。
任务 11这是一条用于展示滚动区域的内容，当前序号为 11。
任务 12这是一条用于展示滚动区域的内容，当前序号为 12。
任务 13这是一条用于展示滚动区域的内容，当前序号为 13。
任务 14这是一条用于展示滚动区域的内容，当前序号为 14。
任务 15这是一条用于展示滚动区域的内容，当前序号为 15。
任务 16这是一条用于展示滚动区域的内容，当前序号为 16。
任务 17这是一条用于展示滚动区域的内容，当前序号为 17。
任务 18这是一条用于展示滚动区域的内容，当前序号为 18。
vue
<MoScrollbar
  :target="panelRef"
  :size="10"
  :offset="4"
  :min-thumb-size="44"
  always
/>

保留原生滚动条 ​

Light
任务 1这是一条用于展示滚动区域的内容，当前序号为 1。
任务 2这是一条用于展示滚动区域的内容，当前序号为 2。
任务 3这是一条用于展示滚动区域的内容，当前序号为 3。
任务 4这是一条用于展示滚动区域的内容，当前序号为 4。
任务 5这是一条用于展示滚动区域的内容，当前序号为 5。
任务 6这是一条用于展示滚动区域的内容，当前序号为 6。
任务 7这是一条用于展示滚动区域的内容，当前序号为 7。
任务 8这是一条用于展示滚动区域的内容，当前序号为 8。
任务 9这是一条用于展示滚动区域的内容，当前序号为 9。
任务 10这是一条用于展示滚动区域的内容，当前序号为 10。
任务 11这是一条用于展示滚动区域的内容，当前序号为 11。
任务 12这是一条用于展示滚动区域的内容，当前序号为 12。
任务 13这是一条用于展示滚动区域的内容，当前序号为 13。
任务 14这是一条用于展示滚动区域的内容，当前序号为 14。
任务 15这是一条用于展示滚动区域的内容，当前序号为 15。
任务 16这是一条用于展示滚动区域的内容，当前序号为 16。
任务 17这是一条用于展示滚动区域的内容，当前序号为 17。
任务 18这是一条用于展示滚动区域的内容，当前序号为 18。
Dark
任务 1这是一条用于展示滚动区域的内容，当前序号为 1。
任务 2这是一条用于展示滚动区域的内容，当前序号为 2。
任务 3这是一条用于展示滚动区域的内容，当前序号为 3。
任务 4这是一条用于展示滚动区域的内容，当前序号为 4。
任务 5这是一条用于展示滚动区域的内容，当前序号为 5。
任务 6这是一条用于展示滚动区域的内容，当前序号为 6。
任务 7这是一条用于展示滚动区域的内容，当前序号为 7。
任务 8这是一条用于展示滚动区域的内容，当前序号为 8。
任务 9这是一条用于展示滚动区域的内容，当前序号为 9。
任务 10这是一条用于展示滚动区域的内容，当前序号为 10。
任务 11这是一条用于展示滚动区域的内容，当前序号为 11。
任务 12这是一条用于展示滚动区域的内容，当前序号为 12。
任务 13这是一条用于展示滚动区域的内容，当前序号为 13。
任务 14这是一条用于展示滚动区域的内容，当前序号为 14。
任务 15这是一条用于展示滚动区域的内容，当前序号为 15。
任务 16这是一条用于展示滚动区域的内容，当前序号为 16。
任务 17这是一条用于展示滚动区域的内容，当前序号为 17。
任务 18这是一条用于展示滚动区域的内容，当前序号为 18。
vue
<MoScrollbar :target="panelRef" :hide-native="false" always />

Scroll 事件 ​

Light
任务 1这是一条用于展示滚动区域的内容，当前序号为 1。
任务 2这是一条用于展示滚动区域的内容，当前序号为 2。
任务 3这是一条用于展示滚动区域的内容，当前序号为 3。
任务 4这是一条用于展示滚动区域的内容，当前序号为 4。
任务 5这是一条用于展示滚动区域的内容，当前序号为 5。
任务 6这是一条用于展示滚动区域的内容，当前序号为 6。
任务 7这是一条用于展示滚动区域的内容，当前序号为 7。
任务 8这是一条用于展示滚动区域的内容，当前序号为 8。
任务 9这是一条用于展示滚动区域的内容，当前序号为 9。
任务 10这是一条用于展示滚动区域的内容，当前序号为 10。
任务 11这是一条用于展示滚动区域的内容，当前序号为 11。
任务 12这是一条用于展示滚动区域的内容，当前序号为 12。
任务 13这是一条用于展示滚动区域的内容，当前序号为 13。
任务 14这是一条用于展示滚动区域的内容，当前序号为 14。
任务 15这是一条用于展示滚动区域的内容，当前序号为 15。
任务 16这是一条用于展示滚动区域的内容，当前序号为 16。
任务 17这是一条用于展示滚动区域的内容，当前序号为 17。
任务 18这是一条用于展示滚动区域的内容，当前序号为 18。

scrollTop：0

Dark
任务 1这是一条用于展示滚动区域的内容，当前序号为 1。
任务 2这是一条用于展示滚动区域的内容，当前序号为 2。
任务 3这是一条用于展示滚动区域的内容，当前序号为 3。
任务 4这是一条用于展示滚动区域的内容，当前序号为 4。
任务 5这是一条用于展示滚动区域的内容，当前序号为 5。
任务 6这是一条用于展示滚动区域的内容，当前序号为 6。
任务 7这是一条用于展示滚动区域的内容，当前序号为 7。
任务 8这是一条用于展示滚动区域的内容，当前序号为 8。
任务 9这是一条用于展示滚动区域的内容，当前序号为 9。
任务 10这是一条用于展示滚动区域的内容，当前序号为 10。
任务 11这是一条用于展示滚动区域的内容，当前序号为 11。
任务 12这是一条用于展示滚动区域的内容，当前序号为 12。
任务 13这是一条用于展示滚动区域的内容，当前序号为 13。
任务 14这是一条用于展示滚动区域的内容，当前序号为 14。
任务 15这是一条用于展示滚动区域的内容，当前序号为 15。
任务 16这是一条用于展示滚动区域的内容，当前序号为 16。
任务 17这是一条用于展示滚动区域的内容，当前序号为 17。
任务 18这是一条用于展示滚动区域的内容，当前序号为 18。

scrollTop：0

vue
<MoScrollbar :target="panelRef" @scroll="handleScroll" />

API ​

属性说明类型默认值
target绑定的滚动容器 ref 或元素HTMLElement | ComponentPublicInstance-
theme主题light | darklight
size滚动条宽度number | string6
minThumbSize滑块最小高度number28
offset距离容器右侧的偏移number0
always是否始终显示booleanfalse
hideNative是否隐藏原生滚动条booleantrue

Events ​

事件说明回调参数
scroll目标容器滚动时触发event