加overflow-y: auto没滚动条是因为内容高度未超过容器高度，必须满足scrollheight > clientheight才触发滚动；常见原因包括父容器无高度、flex-shrink压缩内容、overflow: hidden裁剪等。
为什么直接给.card加overflow-y: auto没滚动条
因为卡片内容高度没超过容器高度，浏览器根本不会触发滚动机制。常见误判是“内容多就该滚”，但实际只看clientHeight与scrollHeight的数值关系——前者必须严格小于后者。
容易踩的坑：
- 用了
height: 100%但父容器没设高度（比如body没height: 100vh），导致卡片高度塌陷 - 子元素用了
margin-bottom或padding-bottom，但被父容器overflow: hidden裁掉，误以为“内容没溢出” - Flex 容器里子项设了
flex-shrink: 1，内容被压缩后刚好不溢出，删掉这个才出现滚动条
隐藏滚动条但保留滚动功能的跨浏览器写法
仅靠::-webkit-scrollbar { width: 0 }只能覆盖 Chrome/Safari，Firefox 和部分新版 Edge 需要额外处理。
实操建议：
- 对滚动容器统一加：
overflow-y: auto; scrollbar-width: none;（Firefox） - 再加 WebKit 专属：
&::-webkit-scrollbar { width: 0; height: 0; } - 禁用
overflow: hidden伪装——它会彻底禁用鼠标滚轮、触摸拖拽和element.scrollTop控制 - 移动端 iOS Safari 必须加
-webkit-overflow-scrolling: touch，否则拖拽卡顿甚至无响应
卡片内滚动区域与全局页面滚动冲突怎么办
当.card启用垂直滚动，而整个页面也跟着滚，说明html和body没锁死。
关键动作：
- 给
html, body加height: 100%; overflow-y: hidden;，这是前提 - 确保卡片容器有明确高度约束，比如
height: calc(100vh - 120px)或max-height: 600px - 如果卡片在 Bootstrap 的
.card-body里，记得检查它是否继承了flex: 1——这可能导致高度计算异常，可临时加min-height: 0修复 - 避免在卡片父级用
display: flex且没设flex-direction: column，否则子项高度可能不受控
滚动条样式微调时最易忽略的细节
自定义滚动条不是纯视觉装饰，它直接影响可操作性。比如把::-webkit-scrollbar-thumb设得太细，在触屏设备上几乎无法拖拽。
真实限制：
-
::-webkit-scrollbar宽度最小有效值约8px，低于此值 iOS Safari 会自动恢复默认样式 -
scrollbar-color（Firefox）只支持thumb color和track color两个值，不支持圆角或阴影 - 所有自定义滚动条都失效于 Windows 的高对比度模式，此时系统强制使用高对比滚动条，CSS 无效
- 如果卡片用了
contain: layout或contain: paint，某些旧版 Chrome 下滚动条可能渲染异常，建议测试后慎用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
