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 滚动条。

<div class="mc-demo">
  <div style="width:100%;height:220px;border:2px solid #1E1E1F;background:#48494A">
    <mc-scroll-view>
      <div style="padding:16px;color:#D0D1D4;font-family:'NotoSans Bold',sans-serif">
        <p v-for="i in 20" :key="i">这是第 {{ i }} 行内容，滚动查看右侧 McUI 滚动条。</p>
      </div>
    </mc-scroll-view>
  </div>
</div>

<mc-scroll-view> 会撑满父容器高度（父容器需有确定高度）。默认插槽为可滚动内容。 根节点会裁剪越过固定外框的内容，内部原生滚动层负责滚轮、触摸和键盘滚动；右侧 Ore UI thumb 与 scrollTop 联动并支持拖动。内容或窗口尺寸变化时会通过 ResizeObserver 自动重算。

自动撑满剩余高度

当父容器使用纵向 flex 布局并提供明确高度时，McScrollView 会自动占用固定区域之外的全部剩余高度。拖动滑块改变父容器高度，可以看到顶部区域保持不变，滚动区实时伸缩。

父容器高度

340

固定区域 · 48px

第 1 条内容 · 滚动区自动占用剩余高度

第 2 条内容 · 滚动区自动占用剩余高度

第 3 条内容 · 滚动区自动占用剩余高度

第 4 条内容 · 滚动区自动占用剩余高度

第 5 条内容 · 滚动区自动占用剩余高度

第 6 条内容 · 滚动区自动占用剩余高度

第 7 条内容 · 滚动区自动占用剩余高度

第 8 条内容 · 滚动区自动占用剩余高度

第 9 条内容 · 滚动区自动占用剩余高度

第 10 条内容 · 滚动区自动占用剩余高度

第 11 条内容 · 滚动区自动占用剩余高度

第 12 条内容 · 滚动区自动占用剩余高度

第 13 条内容 · 滚动区自动占用剩余高度

第 14 条内容 · 滚动区自动占用剩余高度

第 15 条内容 · 滚动区自动占用剩余高度

第 16 条内容 · 滚动区自动占用剩余高度

第 17 条内容 · 滚动区自动占用剩余高度

第 18 条内容 · 滚动区自动占用剩余高度

第 19 条内容 · 滚动区自动占用剩余高度

第 20 条内容 · 滚动区自动占用剩余高度

第 21 条内容 · 滚动区自动占用剩余高度

第 22 条内容 · 滚动区自动占用剩余高度

第 23 条内容 · 滚动区自动占用剩余高度

第 24 条内容 · 滚动区自动占用剩余高度

import { ref } from 'vue'

const demoHeight = ref(340)

这个机制依赖父级的剩余空间可计算：父级需要设置明确高度、display: flex 和 flex-direction: column。如果父级本身也是可伸展区域，同样应设置 min-height: 0。

API

Props

McScrollView 暂无公开 Props。通过父容器尺寸控制可视高度，默认插槽提供滚动内容。