要让HTML页面中间部分局部滚动，核心是用flex布局隔离滚动上下文：html和body设height:100%，header/footer固定高度并flex-shrink:0，main设flex:1和overflow:auto，确保仅中间区域滚动。
要让 HTML 页面中间部分局部滚动，核心是「隔离滚动上下文」——把中间区域变成一个独立的可滚动容器，同时固定头部和底部。不能靠 body 或 html 滚动来实现，否则整个页面都会动。
用 flex 布局 + overflow: auto 控制中间区域
这是最稳定、兼容性好、无需 JS 的方案。关键在于用 display: flex 把页面拆成三块，让 main 占满剩余高度并启用滚动。
-
html和body必须设height: 100%，否则flex: 1无效 -
header和footer高度要明确（比如60px），不能是auto且无约束，否则main无法计算可用空间 -
main必须设overflow: auto（不是scroll），否则在内容不够时也会显示空滚动条 - 如果
main里有子元素用了transform或position: fixed，可能截断滚动上下文，导致滚动失效
示例 CSS：
html, body { margin: 0; height: 100%; }
body { display: flex; flex-direction: column; }
header, footer { flex-shrink: 0; height: 60px; }
main { flex: 1; overflow: auto; }
overflow-y: scroll 和 overflow: auto 的区别在哪
两者都让容器支持纵向滚动，但触发逻辑不同，选错会带来明显体验问题。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
overflow-y: scroll强制显示滚动条（即使内容没溢出），在 macOS 上尤其突兀；overflow: auto只在需要时才显示，更自然 - 如果中间区域高度由内容撑开（比如没设
flex: 1），overflow-y: scroll会直接失效——因为容器本身没高度限制，浏览器不知道“溢出”从哪算起 - 移动端 Safari 对
overflow-y: scroll的惯性滚动支持弱，需额外加-webkit-overflow-scrolling: touch（已废弃但仍有影响）
为什么 scroll-behavior: smooth 在局部滚动里不生效
很多人加了 scroll-behavior: smooth 发现局部容器滚动还是生硬，根本原因是它只对「根滚动容器」或「显式设置了该样式的可滚动元素」起作用，且必须配合 scrollTo() 或锚点跳转。
- 写在
html上只影响整页滚动，对main这类子容器无效 - 必须单独给
main加：main { scroll-behavior: smooth; } - 但注意：CSS 的
scroll-behavior对scrollTop赋值无效，只能用于scrollTo()、scrollIntoView()或锚点 - 若用 JS 控制滚动，更可靠的是：
main.scrollTo({ top: 200, behavior: 'smooth' })
局部滚动时锚点链接误触整页滚动
当页面同时存在全局锚点（如 <a href="#section2">）和局部滚动容器时，点击链接可能让整个页面跳转，而不是在 main 内部滚动。
- 根本原因：浏览器默认在
document根上下文中解析href="#xxx"，不会自动限定到某个容器 - 解决方法：不要用原生锚点，改用 JS 拦截点击，然后调用
main.querySelector('#xxx').scrollIntoView({ behavior: 'smooth' }) - 如果必须用原生链接，目标元素必须在
main内部，且main要设id并用<a href="#main-container#section2">—— 但这种写法非标准，不推荐 - 更稳妥的做法：所有局部滚动导航都走 JS，避免语义混淆
最容易被忽略的一点：局部滚动容器的父级如果有 transform、filter 或 will-change，会创建新的层叠上下文和滚动上下文边界，导致 overflow 失效或滚动卡顿。检查 DevTools 的 Layout 面板，确认滚动容器的 “Scrolling Layer” 是否被意外切断。
