Skip to content

ScrollView 滚动区

McUI 风格的自定义滚动区。基于原生滚动 + 联动滚动条 thumb(可拖动)。

原项目滚动条 JS 与全局环境深度耦合,本库提供等价的独立实现

这是第 1 行内容,滚动查看右侧 McUI 滚动条。

这是第 2 行内容,滚动查看右侧 McUI 滚动条。

这是第 3 行内容,滚动查看右侧 McUI 滚动条。

这是第 4 行内容,滚动查看右侧 McUI 滚动条。

这是第 5 行内容,滚动查看右侧 McUI 滚动条。

这是第 6 行内容,滚动查看右侧 McUI 滚动条。

这是第 7 行内容,滚动查看右侧 McUI 滚动条。

这是第 8 行内容,滚动查看右侧 McUI 滚动条。

这是第 9 行内容,滚动查看右侧 McUI 滚动条。

这是第 10 行内容,滚动查看右侧 McUI 滚动条。

这是第 11 行内容,滚动查看右侧 McUI 滚动条。

这是第 12 行内容,滚动查看右侧 McUI 滚动条。

这是第 13 行内容,滚动查看右侧 McUI 滚动条。

这是第 14 行内容,滚动查看右侧 McUI 滚动条。

这是第 15 行内容,滚动查看右侧 McUI 滚动条。

这是第 16 行内容,滚动查看右侧 McUI 滚动条。

这是第 17 行内容,滚动查看右侧 McUI 滚动条。

这是第 18 行内容,滚动查看右侧 McUI 滚动条。

这是第 19 行内容,滚动查看右侧 McUI 滚动条。

这是第 20 行内容,滚动查看右侧 McUI 滚动条。

vue
<template>
  <div style="height: 400px">
    <mc-scroll-view>
      <!-- 长内容 -->
    </mc-scroll-view>
  </div>
</template>

<mc-scroll-view> 会撑满父容器高度(父容器需有确定高度)。无 Props,默认插槽为可滚动内容。 滚动条 thumb 支持拖动;内容/窗口尺寸变化时自动重算(内部 ResizeObserver)。

MIT Licensed · 设计语言移植自 Spectrollay-McUI