局部纵向滚动的本质是容器“自己滚”，需显式设置 height 或 max-height 并配 overflow-y: auto/scroll；iOS Safari 必加 -webkit-overflow-scrolling: touch 启用惯性滚动。
给容器设固定高度 + overflow-y: scroll
局部纵向滚动的本质，是让某个区域“自己滚”，而不是整个页面滚。关键不是加什么高级属性，而是控制好容器的尺寸和溢出行为。
最常见的错误是只写 overflow-y: scroll 却不设高度——浏览器不知道该在哪截断，结果滚动条不出现，内容直接撑开父容器。
- 必须显式设置容器的
height（或max-height），值要小于内部内容总高度 -
overflow-y: auto比scroll更稳妥：有内容溢出才显示滚动条，避免空滚动条干扰视觉 - 如果父容器用了
display: flex，子容器需加flex-shrink: 0或用min-height: 0防止高度塌陷 - 不要依赖
overflow: hidden来“隐藏多余内容”——它不提供滚动能力，只是裁剪
示例：
<div class="scroll-area">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<!-- ... 多个 li -->
</ul>
</div>.scroll-area {
height: 200px;
overflow-y: auto;
border: 1px solid #ccc;
}移动端 Safari 滚动卡顿或失效？加 -webkit-overflow-scrolling
iOS Safari 对局部滚动有特殊限制：默认使用“非惯性”滚动，拖动松手后立刻停，体验像在拉抽屉；更糟的是，某些嵌套场景下滚动可能完全无响应。
立即学习“前端免费学习笔记（深入）”；
这个问题不是 bug，是 WebKit 的渲染策略——它把局部滚动区域当成普通块处理，没启用硬件加速。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须加上
-webkit-overflow-scrolling: touch才能激活惯性滚动和流畅滑动 - 该属性仅对设置了
overflow且有明确尺寸的容器生效，单独写无效 - 注意兼容性：
-webkit-overflow-scrolling在 iOS 16+ 中已被标记为 deprecated，但目前（2026年）仍是解决卡顿最直接有效的手段 - 如果同时用了
transform: translateZ(0)或will-change: scroll-position，可能反而干扰原生滚动行为，建议先移除测试
滚动条样式丑、占空间？用 ::webkit-scrollbar 定制但别删光
原生滚动条在不同系统上长得不一样，Windows 上宽、macOS 上细、iOS 上干脆不显示轨道——想统一视觉，得动手改。
但很多人一上来就 display: none 整个滚动条，结果用户根本不知道这区域还能滚。
- 至少保留拇指（
::webkit-scrollbar-thumb）可拖拽，否则等于废掉滚动功能 - 用
::webkit-scrollbar-track控制轨道背景，透明或浅灰比纯白更友好 - 宽度别设太小：小于
6px在触屏设备上极难点中，建议最小8px - 别在
:hover里才显示滚动条——移动端没 hover，且桌面用户第一次进来也找不到入口
内容动态加载后滚动条消失？检查 height 是否被重置
AJAX 更新局部 DOM 后，滚动容器突然“不能滚了”，大概率不是 JS 错误，而是 CSS 高度计算被破坏。
典型诱因：新插入的内容触发了父级 height: auto 计算，或者 JS 框架（如 Vue/React）重渲染时清掉了内联 height。
- 优先用
max-height替代height，它允许内容撑开但上限可控 - 如果必须用 JS 控制高度（比如根据视口动态算），记得在 DOM 插入完成后调用
offsetHeight强制重排，再设 height - 避免在动画过程中修改容器高度——滚动条会跳、位置会偏移
- 调试时打开浏览器开发者工具，选中容器元素，看 computed 样式里的
height和scrollHeight是否合理（前者应小于后者）
局部滚动看着简单，真正上线时最常崩在“高度没锁死”和“iOS 滚不动”这两处。别迷信 JS 滚动库，原生方案只要尺寸和 overflow 配对正确，足够稳定。
