HTML页面部分内容可滚动需设固定宽高+overflow: auto；Flex/Grid布局中子项防压缩用flex-shrink: 0或min-width: 0；固定头尾用flex: 1+overflow-y: auto；滚动定位遮挡用scroll-margin-top；iOS卡顿加-webkit-overflow-scrolling: touch。
让 HTML 页面“部分内容”可滚动，本质是限制容器尺寸并显式启用溢出处理——不是整个页面滚，而是某个 <div> 自己滚。
<h3>给容器设固定宽高 + overflow: auto</h3>
<p>这是最基础、兼容性最好的方式。浏览器会自动判断内容是否溢出，只在需要时显示滚动条。</p>
<ul>
<li>必须设置 <code>width 和 height（或 max-height），仅用 min-height 不生效
overflow: auto 是首选：无溢出时不显示滚动条，比 scroll 更干净overflow-y: auto; overflow-x: hidden; 避免误触横向拖拽flex-shrink: 0 或 min-width: 0 防止被压缩导致滚动失效用 flex 布局固定头尾，只让中间区域滚动
常见于带固定 header/footer 的管理后台或仪表盘页面。关键在于让中间区域“撑不满父容器”，再赋予滚动能力。
- 对
body或根容器设display: flex; flex-direction: column; height: 100vh; - header 和 footer 设固定高度（如
height: 60px）或flex: 0 0 auto - main 区域用
flex: 1; overflow-y: auto;—— 这个1表示“占满剩余空间”，且允许内部溢出滚动 - 注意：若 main 内部有
height: 100%的子元素，可能撑满导致无法滚动，应改用min-height: 0解除约束
滚动到底部时内容被 header 遮住？用 scroll-margin-top
当调用 element.scrollIntoView() 滚到某个区块，结果被顶部 fixed 导航栏盖住，别手动算 offset——CSS 有原生解法。
立即学习“前端免费学习笔记（深入）”；
- 给目标元素加 CSS：
scroll-margin-top: 80px;（值等于 header 高度） - 这个偏移会自动参与
scrollIntoView()的位置计算，无需 JS 干预 - 响应式场景下，可用媒体查询动态调整：
@media (max-width: 768px) { .section { scroll-margin-top: 60px; } } - 不支持该属性的老浏览器（如 IE）会忽略它，属于安全降级，不影响功能
移动端滚动卡顿或没惯性？加 -webkit-overflow-scrolling
iOS Safari 和部分安卓 WebView 默认对局部滚动做性能优化，导致拖拽迟滞、松手后不滑行。
- 在可滚动容器上加：
-webkit-overflow-scrolling: touch; - 必须配合
overflow-y: auto才生效，单独写无效 - 注意：该属性已废弃但仍在主流 iOS 版本中有效；现代方案倾向用
scroll-behavior: smooth+ 软件渲染优化，但touch仍是解决惯性缺失最直接的手段 - 若开启后出现闪烁或白屏，检查是否有
transform或will-change与之冲突，可尝试加backface-visibility: hidden
真正容易被忽略的是渲染时机和盒模型干扰：比如在 DOMContentLoaded 时立即设置 scrollTop，但此时图片还没加载，scrollHeight 偏小；又比如 box-sizing: border-box 下 padding 被计入 height，却忘了预留滚动空间。这些细节不报错，但滚动行为会“差一点”。
