列表横向 / 纵向滚动体验 Demo
对齐 web-admin Fresh Mint。用下方 Tab 切换「现状问题」与三种改法,
请在灰色模拟视口内纵向滚动到中部、再试横向滚动,感受差异。
问题 1:横滚条在表最底部,行多时够不着
问题 2:纵滚到中部后看不到表头
目标:横滚条常在可视区底部 · 表头始终可见
现状:整页拉长,表跟着页面滚
与多数业务列表一致:表格无固定高度,横向滚动发生在整张表底部。
模拟视口
请先向下滚半屏
复现:① 纵向滚到行 20+ → 表头消失;② 想横看「操作」列 → 必须滚到最底才能碰到横滚条。
已选 0 项
方案 A:表格视口填满高度(内嵌滚动)
对齐规范:动态 height 使表体尽量撑满,
分页始终可见且下方留 10px;
纵滚在表体内,表头 sticky,横滚条贴表体可视区底。
实现成本低
与 EP 官方行为一致
一次解决两个问题:表头始终在表体顶部;横滚条始终在表体可视区底部(不必滚到第 60 行);分页下约 10px。
已选 0 项
方案 B:保留整页滚动 + sticky 表头 + 底部悬浮横滚条
表仍可随页面变高;用 sticky 钉住表头;在滚动容器底部再放一条「镜像」横滚条,始终可见。
交互灵活
实现与同步成本更高
适合「不想裁切表体高度、希望一屏看更多行」的场景;需维护真实横滚与悬浮条 scrollLeft 双向同步。
已选 0 项
方案 C:表体内嵌滚动 + 顶部镜像横滚条
在方案 A 基础上,表头上方再放一条横滚条:人眼在看标题附近时也能横移,无需移到表底。
A 的增强
双条同步,略占高度
横滚可达性最好(顶/底都能拖)。若采用 A,可按「列特别多」的页面再叠加顶部条。
已选 0 项
与现有代码的关系
规范 §7.6 已写 max-height + overflow;HTML demo 也有 sticky 表头。
业务页多数未给 el-table 设高度,bx 的 .table-scroll 仅 overflow-x,故问题仍在。
推荐落地路径
优先方案 A:公共列表用 useListTableViewportHeight 填满视口(分页下 10px),分页留在表外。
列极多的页可再加方案 C 顶条。
注意点
固定高度后筛选区展开会挤表体,需用「视口剩余高度」动态计算;
展开行 / 树表要回归测 doLayout。
看完后请选择倾向方案(可点选,并在对话里告诉我)
A表体内嵌滚动
成本最低,一次修两个问题;与 Element Plus / 规范最贴合。
Bsticky + 悬浮横条
保留「整表随页面变高」;同步逻辑与兼容成本更高。
CA + 顶部镜像条
在 A 上增强横滚可达性;适合列特别宽的列表。