局部文本滚动需容器有明确高度边界且内容超出该边界，否则scrolltop恒为0；常见失效原因包括未设height/max-height、height:100%父级无显式高、flex子项被压缩、父级transform/filter隔离上下文等。
局部文本滚动不是加个 overflow-y: auto 就能成——它必须满足「容器有明确高度边界」和「内容实际超出该边界」两个硬性条件，否则 scrollTop 永远是 0，滚动行为完全不会触发。
为什么加了 overflow-y: auto 还是不能滚？
最常见原因是容器没设 height 或 max-height，只写了 min-height 或靠内容撑高。浏览器需要一个确定的“可视区域高度”才能建立滚动上下文。
-
height: 100%多数情况下无效——父级若没显式高度，百分比会计算为 0 - Flex 子项若没加
flex-shrink: 0，可能被压缩到无高度，导致内部文本不可见 - 父级用了
transform、filter或contain: paint，会隔离滚动上下文，使offsetTop失准、scrollTop读不到真实值 - 文本容器内含
display: contents或visibility: hidden子元素，会干扰滚动高度计算
用 CSS 实现稳定局部文本滚动的最小配置
以下写法在 Chrome/Firefox/Safari（15.4+）中均可靠，不依赖 JS：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 容器设
height或max-height（推荐max-height: 200px或40vh） - 加
overflow-y: auto（别用overflow: auto，避免误触水平滚动） - 若容器是 Flex 子项，加
flex-shrink: 0防塌陷 - 如需平滑滚动，对容器本身加
scroll-behavior: smooth（不是html或body） - 隐藏原生滚动条但保留功能：用
::-webkit-scrollbar { display: none; }（仅 WebKit；Firefox 下无滚动条仍可触控滑动）
用 JavaScript 控制文本滚动位置（如回顶/跳转）
不要用 scrollIntoView() 去“模拟回顶”，它本质是让某个子元素进视口，不是让容器归零。直接操作容器更稳：
- 回顶部：
container.scrollTo({ top: 0, behavior: 'smooth' }) - 滚动到某段文字（如
<p id="section2"></p>）：
先确认目标在容器内：container.contains(target)；
再算相对偏移：target.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop；
最后调container.scrollTo({ top: offset, behavior: 'smooth' }) - 按钮控制步进滚动，优先用
container.scrollBy({ top: 40 })，比手动改scrollTop更可靠（不依赖初始状态，连点/重排后不失效） - 禁用按钮时，边界判断别写
scrollTop === 0，要用container.scrollTop 和 <code>container.scrollTop > container.scrollHeight - container.clientHeight - 0.5，防 subpixel 渲染误差
真正容易被忽略的是：滚动容器的父级是否“封住了高度”。很多问题不是容器本身写的不对，而是它的上两级祖先用了 flex: 1 却没设 max-height，导致容器无限撑高，overflow 彻底失效。检查时从 document.documentElement 往下逐层看 computed height，比反复调样式更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
