侧边栏独立滚动需设置固定高度（如100dvh）和overflow-y: auto，并加overscroll-behavior-y: contain；flex布局下要设flex-shrink: 0，主内容用flex: 1并包裹overflow: hidden容器；ios safari需加-webkit-overflow-scrolling: touch和overscroll-behavior: none。
侧边栏滚动不带动主内容滚动
关键在于让侧边栏容器拥有自己的滚动上下文，而不是依赖整个页面的 body 滚动。常见错误是直接给 .sidebar 设 overflow-y: auto 却没限制高度，结果滚动行为被父级或文档流接管，实际还是页面在滚。
必须显式设置侧边栏容器的固定高度（或相对于视口的高度），并启用局部滚动：
- 用
height: 100vh或max-height: 100vh确保容器有明确边界（注意：100vh包含地址栏高度，在移动端可能不准，更稳妥用100dvh） - 添加
overflow-y: auto，同时设overscroll-behavior-y: contain防止滚动到底时触发外层页面滚动（尤其 iOS Safari） - 避免侧边栏父元素设
overflow: hidden或transform，这会创建新的层叠上下文并干扰滚动检测
Flex 布局下 sidebar 滚动失效的典型原因
当侧边栏和主内容同属一个 display: flex 容器时，若未约束侧边栏尺寸，它可能被 flex 压缩或拉伸，导致 overflow 不生效。
实操要点：
- 给侧边栏加
flex-shrink: 0，禁止它被压缩 - 主内容区用
flex: 1占满剩余空间，但需额外包裹一层带overflow: hidden的容器，否则主内容溢出仍会撑开页面 - 若使用
flex-direction: column，则侧边栏需设max-height+overflow-y，不能只靠flex: 1
移动端 Safari 中侧边栏滚动卡顿或穿透
iOS Safari 对局部滚动优化较弱，常出现滚动迟滞、回弹过度或手指松开后继续滚动穿透到背景页。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
针对性处理：
- 为侧边栏容器加
-webkit-overflow-scrolling: touch（仅 Safari 有效，已废弃但目前仍必要） - 禁用默认回弹：在滚动容器上设
overscroll-behavior: none，或更精确地用overscroll-behavior-y: contain - 避免在侧边栏内使用
position: fixed子元素——它会脱离滚动上下文，造成定位错乱 - 慎用
will-change: transform，可能引发渲染层剥离失败，反而加重卡顿
使用 position: sticky 实现“半固定”侧边栏滚动
如果需求不是全程独立滚动，而是希望侧边栏在滚动时“吸附”在视口顶部（如目录导航），position: sticky 是轻量解法，但有隐性条件。
必须满足：
- 父容器不能是
overflow: hidden或transform非 none，否则 sticky 失效 - 需指定
top值（如top: 1rem），且该值是相对于最近的有滚动行为的祖先计算的 - sticky 元素本身不能设
height: 100%，否则可能无法触发粘性行为；推荐用max-height+overflow-y: auto组合
真正难的是滚动边界判断——当侧边栏内容高度小于视口时，它不会滚动；一旦超长，sticky 会先吸附再开启内部滚动，这个切换点容易被忽略，调试时建议用 outline: 1px solid red 临时标出容器实际尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
