卡片容器必须设固定高度（height）或最大高度（max-height）并配 overflow-y: auto，才能触发内部滚动条；隐藏轨道需三段跨浏览器规则；滚动应平滑且聚焦防跳，ios需避免transform干扰。
卡片容器必须设固定高度和 overflow-y
卡片内部出现滚动条的前提，是内容实际高度超过容器可视区域。如果只写 overflow-y: auto 但没限制高度，浏览器会把卡片撑开，滚动条根本不会触发。常见错误是依赖 flex 自动拉伸或用 min-height，结果滚动失效。
正确做法是给卡片内容区（比如 .card-body）明确设置 height 或 max-height，再配 overflow-y: auto。注意：用 max-height 更安全，它允许内容少时自然收缩，多时才滚动。
-
height: 200px—— 强制固定高，内容超长必滚动 -
max-height: 200px—— 内容短时不滚动，省空间 - 避免对整个
.card元素设overflow，应作用于内部内容容器
隐藏默认滚动条轨道但保留可滚动能力
“微型”不是指尺寸小，而是视觉上不抢眼——轨道要淡、滑块要窄、hover 才显形。直接用 overflow: hidden 会禁掉滚动，不可取。
跨浏览器隐藏轨道需三段规则并存：::-webkit-scrollbar（Chrome/Safari）、-ms-overflow-style: none（IE/Edge）、scrollbar-width: none（Firefox）。但注意：Firefox 的 scrollbar-width: none 仅在 overflow 为 auto 或 scroll 时生效，设成 hidden 就无效。
- 滑块宽度建议设
6px，太细难拖，太粗破坏“微型”感 - 用
::-webkit-scrollbar-thumb控制滑块颜色和圆角，例如border-radius: 3px - 不要对卡片父容器加
no-scrollbar类，应精准作用于滚动容器本身
滚动行为平滑 + 滚动到顶部自动聚焦
用户点开卡片后直接滚动，生硬跳转体验差。加 scroll-behavior: smooth 是最轻量的解法，但它只对 CSS 触发的滚动（如锚点、scrollIntoView）有效，对 JS 直接改 scrollTop 无效。
若卡片内有搜索或筛选操作，常需 JS 滚动回顶。此时应搭配 scrollIntoView({ behavior: 'smooth' }) 或手动设置 element.scrollTo({ top: 0, behavior: 'smooth' })。别忘了加防抖：连续触发筛选时，只执行最后一次滚动。
- 局部滚动容器上设
scroll-behavior: smooth，比全局设html更可控 - 移动端 Safari 对
scroll-behavior支持不稳定，必要时 fallback 到scrollTo+requestAnimationFrame - 滚动后焦点未归位？补一句
element.focus({ preventScroll: true })防止意外跳视口
移动端触摸滚动卡顿与惯性丢失
卡片在 iOS 上滚动发涩、松手即停，大概率是容器或其祖先元素加了 transform、will-change 或 overflow: hidden，干扰了原生滚动合成层。这不是代码写错，而是渲染机制冲突。
解决路径很窄：优先移除卡片外层不必要的 transform；其次确保滚动容器自身没设 will-change: transform；最后检查是否被 position: fixed 父级截断了滚动上下文。iOS Safari 不吃 CSS 滚动优化那套，得靠原生行为兜底。
- 避免在滚动容器上写
touch-action: none，它会禁掉所有手势 - 用
-webkit-overflow-scrolling: touch已过时，现代 iOS 不需要也不认 - 真要保惯性？把卡片放进
body直接子元素，绕开嵌套层级干扰
height 和 overflow 必须同时存在且作用于同一元素；缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
