用 overflow-y: scroll 实现局部垂直滚动需设固定高度容器并启用溢出滚动，避免影响全局滚动；图片应配合 object-fit 或包装层控制显示，移动端需加 -webkit-overflow-scrolling: touch 和 will-change: scroll-position 优化体验。
用 overflow-y: scroll 实现局部区域垂直滚动
页面里只让某一块（比如一个 <div>）能上下滚动长图，其余部分不动，核心就是限制容器尺寸 + 开启溢出滚动。关键不是整个页面滚，而是“局部”——所以不能动 body 或 html 的滚动条。
常见错误是直接给图片设 height: 100vh 然后指望它自己可滚，结果图片被裁剪、滚动条不出现，或者整个页面跟着动。
- 容器必须有明确的
height或max-height（比如400px或calc(100vh - 120px)） - 必须设置
overflow-y: auto或scroll（推荐auto，没溢出时不显示空滚动条） - 图片不要设
width: 100%后又忘记height: auto，否则可能拉伸变形；更稳妥的是用max-width: 100%+height: auto - 如果容器用了
flex布局，注意flex-shrink: 0可能阻止高度生效，需要显式设min-height: 0防止 flex 容器忽略 overflow
图片过长时避免撑开容器：用 object-fit 或包装层控制
纯 <img> 标签在固定高容器里，默认会按原始宽高比拉伸或溢出，导致滚动体验卡顿、首屏看不到顶部。这不是滚动本身的问题，而是渲染方式没对齐。
两种主流解法：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 用
<picture>或<img>配合object-fit: contain+object-position: top，让图完整显示、顶部对齐，多余空间留白（适合示意图、说明图） - 把图片放进一个无 padding/margin 的子容器，子容器设
height: fit-content，父容器只管滚动——但注意这要求父容器高度固定，且子容器不能有 flex/gird 的隐式行为干扰 - 如果图是 SVG 或需响应式缩放，建议内联
viewBox并去掉width/height属性，靠 CSS 控制尺寸
移动端滚动卡顿？加 will-change: scroll-position 和 -webkit-overflow-scrolling: touch
iOS Safari 旧版本（iOS 12 及以前）对非 body 滚动区域默认启用“弹性滚动”，但惯性弱、易中断；Android Chrome 则可能因合成层缺失导致掉帧。这不是 bug，是浏览器默认优化策略。
- 给滚动容器加
will-change: scroll-position（仅在必要时，别滥用，否则内存开销上升） - iOS 必加
-webkit-overflow-scrolling: touch，否则滚动生涩、回弹异常 - 避免在滚动容器上设
transform、filter或半透明背景，这些会触发额外合成层，反而拖慢 - 若滚动区域内容动态加载（如长图分段），记得在新增内容后调用
container.scrollIntoView({ block: 'nearest' })避免视口错位
用 JavaScript 监听滚动位置做联动？优先用 IntersectionObserver 替代 scroll 事件
如果需求不只是“能滚”，而是“滚到某一段触发动画/切换标题/上报埋点”，直接监听 scroll 事件容易引发频繁重排、iOS 上触发不及时。
-
IntersectionObserver更轻量，支持监听元素进入/离开滚动容器视口，且原生节流 - 观察目标必须是滚动容器内的子元素（比如每张长图里的
<section>），不能直接观察容器自身 - 创建 observer 时传入
{ root: container, threshold: 0.1 }，表示子元素 10% 进入容器时触发 - 避免在
scroll回调里调用getBoundingClientRect()或修改样式——这些强制同步布局，卡顿立竿见影
滚动区域的边界行为最容易被忽略：比如用户快速滚动到底部后松手，有些安卓机型会因 overscroll bounce 导致容器轻微晃动，影响后续点击；这时候加 overscroll-behavior-y: contain 能禁用连锁滚动，但要注意它不兼容 IE 和老版 UC 浏览器。
