本质是让容器在内容溢出时局部滚动而非整页滚动，必须同时满足两个硬性条件：设置具体 height（或 max-height）和 overflow-y: auto（或 scroll），缺一不可。
给容器设固定高度 + overflow-y: auto
局部纵向滚动的本质，是让某个元素内部内容超出其可视区域时产生滚动条，而不是整页滚动。关键不在“怎么加滚动条”，而在“怎么让它有滚动的条件”。
必须同时满足两个硬性条件：height（或 max-height）和 overflow-y: auto（或 scroll）。缺一不可。
-
height必须是具体值（如300px、50vh），不能是auto或未设置；用min-height不触发滚动，它只撑高不截断 -
overflow-y: auto是推荐写法：内容不溢出时不显示滚动条，更干净；scroll会强制显示空滚动条，iOS 上可能留白 - 别忘了重置默认边距：
html, body { margin: 0; padding: 0; }，否则外部margin可能撑开父容器，导致滚动失效
避免父容器 overflow: hidden 干扰
常见失效场景：滚动容器明明写了 overflow-y: auto，但滚动条就是不出现。大概率是它的某个祖先元素（比如外层 div、section 或 flex 容器）设置了 overflow: hidden，把子级的溢出直接剪掉了。
排查方法很简单：在浏览器开发者工具中选中该容器，看 Computed 面板里的 overflow 实际值是不是 hidden。如果是，就得往上逐层检查父级样式。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- Flex 容器默认不收缩也不扩展子项滚动能力，但一旦加了
overflow: hidden，就会截断子级溢出 - 使用
display: grid时同理，grid容器自身overflow设置会覆盖子项行为 - React/Vue 组件中，父组件的样式可能通过全局 class 意外透传，建议用
class做作用域隔离，而非依赖嵌套层级
自定义滚动条样式（仅 WebKit 内核）
::-webkit-scrollbar 系列伪元素只能在 Chrome、Edge、Safari 上生效，Firefox 和部分安卓 WebView 完全不支持。不要把它当作功能必需项，而是纯视觉增强。
如果真要加，注意三部分必须齐备才能看到效果：
-
::-webkit-scrollbar：定义滚动条整体尺寸（width对垂直滚动条生效） -
::-webkit-scrollbar-thumb：滑块部分，至少设background-color，否则透明不可见 -
::-webkit-scrollbar-track：轨道背景，不设也行，但设了更可控 - 别对
body或html直接写这些伪类——它们只作用于有overflow的具体容器
滚动到底部 / 滚动到某元素的 JS 控制
局部滚动容器的 scrollTop 是核心控制点，不是 window.scrollY。操作错对象，代码就完全没反应。
获取容器后，常用操作：
- 滚动到底部：
container.scrollTop = container.scrollHeight - 滚动到顶部：
container.scrollTop = 0 - 滚动到某个子元素：
targetElement.offsetTop - container.offsetTop，但要注意这个值受 border/padding 影响，更稳的是container.scrollTop = targetElement.offsetTop - container.getBoundingClientRect().top + container.scrollTop - 平滑滚动：现代写法是
container.scrollTo({ top: 200, behavior: 'smooth' })，比手动改scrollTop更可靠，且自动处理动画帧
容易被忽略的是：容器必须已渲染完成、尺寸已计算完毕，否则 scrollHeight 可能为 0。DOM 加载完再执行，或用 requestAnimationFrame 延迟一帧再读取。
