列表容器实现纵向滚动需设max-height并配overflow-y: auto，防flex/grid撑开要加min-height: 0，滚动条样式webkit用::-webkit-scrollbar、firefox用scrollbar-width/color，js控制用scrolltop或scrollintoview。
给列表容器设置固定高度和 overflow-y: auto
核心就是让列表所在元素脱离文档流的自然高度，用固定尺寸框住它，再开启纵向滚动。不能依赖父容器或 body 滚动，否则整个页面都会动。
- 必须显式设置
height或max-height（推荐后者，更灵活） -
overflow-y: auto是关键，scroll会强制显示滚动条，auto只在内容溢出时出现 - 避免对列表项（如
<li>）设overflow，那是无效的；滚动行为只作用于直接包裹列表的容器 - 如果容器是
display: flex布局，需确认主轴方向与滚动方向一致，且子元素不撑开容器（可加flex-shrink: 0或min-height: 0防止 flex 项干扰高度计算）
避免滚动区域被弹性布局“撑开”
Flex 或 Grid 容器里，子元素默认会拉伸容器高度，导致 max-height 失效，滚动条不出现在预期位置。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 对滚动容器加
min-height: 0（Flex 项）或min-block-size: 0（Grid 项），这是最常见漏掉的修复点 - 检查父级是否用了
align-items: stretch（Flex 默认值），它会让子项填满交叉轴，间接破坏高度约束 - 用浏览器开发者工具检查 computed height，确认滚动容器的实际渲染高度是否等于你设的
max-height
滚动条样式兼容性处理
自定义滚动条在 Chrome/Edge（WebKit/Blink）可用 ::-webkit-scrollbar，但 Firefox 和 Safari（新版本）不支持，原生样式无法统一。
- 仅在 WebKit 内核中生效：
div::-webkit-scrollbar { width: 8px; }、div::-webkit-scrollbar-thumb { background: #999; border-radius: 4px; } - Firefox 使用
scrollbar-width（仅auto/thin/none）和scrollbar-color（颜色对），不支持 thumb 圆角等细节 - 不要依赖 CSS 自定义滚动条实现功能逻辑——它只是视觉增强，不影响滚动能力本身
JavaScript 控制滚动位置时注意 container.scrollTop
手动滚动或初始化定位要用 scrollTop，但它只对设置了 overflow-y 的容器有效，且值单位是像素，不是行数。
- 获取当前滚动位置：
container.scrollTop，设置：container.scrollTop = 200 - 滚动到某子元素可见：
targetElement.scrollIntoView({ block: 'nearest', inline: 'start' })，比手算scrollTop更可靠 - 监听滚动事件别绑定在
window，而要绑定在具体滚动容器上：container.addEventListener('scroll', handler) - 注意 iOS Safari 中，
scrollTop在某些缩放或 position: fixed 组合下可能不准，建议用getBoundingClientRect()辅助判断可视区域
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
