局部滚动容器必须设置固定高度（如max-height）和overflow-y: auto；需避免pointer-events: none拦截滚轮事件，iOS Safari还需添加-webkit-overflow-scrolling: touch确保惯性滚动。
局部滚动容器必须设置固定高度和 overflow-y: auto
浏览器默认只对 body 响应鼠标滚轮，要让某一块区域（比如侧边菜单、聊天记录列表）独立滚动，核心前提是它得是一个「可滚动的块级容器」。光写 overflow-y: scroll 不够，它会强制显示滚动条；而 overflow-y: auto 才是正确选择——内容超长时才出现滚动条，且支持滚轮。
常见错误是容器没有显式高度，或者高度设为 100% 但父元素没高度约束，导致计算失败，滚轮完全无效。
- 容器需有明确的
height或max-height（例如max-height: 400px） - 避免用
min-height替代，它不触发滚动上下文 - 若用 Flex 布局，确保父容器设了
display: flex; flex-direction: column，子项用flex: 1占满剩余空间后再加overflow-y: auto
滚动区域不能被 pointer-events: none 阻断
有些 UI 为了实现遮罩或透传效果，会在局部滚动区外层加一层空 div 并设 pointer-events: none，结果发现滚轮失效——因为滚轮事件属于 pointer event 的一部分，一旦父层拦截，子层收不到原始事件。
检查方式很简单：在滚动区域上右键「检查元素」，看 computed 样式里 pointer-events 是否为 none 或被继承覆盖。
- 如果必须透传点击，改用
pointer-events: auto并在需要拦截的子元素上单独设pointer-events: none - 不要在滚动容器本身或其直接父容器上设
pointer-events: none - Vue/React 中动态绑定 class 时，留意条件渲染是否意外启用了禁用指针的 class
移动端 Safari 滚动卡顿或失效的常见原因
iOS Safari 对局部滚动有更严格的触发条件：它要求容器不仅满足 overflow-y: auto 和高度限制，还必须有 -webkit-overflow-scrolling: touch（iOS 15.4 之前必需，之后渐进移除但保留兼容性），否则会出现“滚动一次就停”“手指抬起后不惯性滑动”等问题。
这个属性不是可选优化项，而是 iOS 局部滚动流畅性的关键开关。
- 务必给滚动容器加上
style="-webkit-overflow-scrolling: touch;" - 该属性在 Chrome/Firefox 中被忽略，无副作用，可安全共存
- 若使用 CSS-in-JS 或 Tailwind，注意它不被默认包含，需手动加
webkitOverflowScrolling: 'touch'或写入style属性
JavaScript 强制滚动时别直接操作 scrollTop
当业务需要程序化滚动（比如新消息自动滚到底），很多人直接写 el.scrollTop = el.scrollHeight，这在多数情况可行，但在 Safari + 局部滚动容器中容易触发“滚动跳变”或“目标位置不准”，尤其容器内有图片未加载完成、字体尚未渲染时。
根本原因是 scrollTop 是同步赋值，不等待布局稳定；而浏览器可能还在计算高度。
- 优先用
el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })，它基于 CSSOM 规范，兼容性更好 - 若需兼容老版本 Safari（requestAnimationFrame 包一层：
requestAnimationFrame(() => { el.scrollTop = el.scrollHeight; }); - 监听
resize或load事件后滚动，记得加防抖，避免高频触发重排
滚动是否生效，最终取决于三层叠加：CSS 是否构成可滚动上下文、事件是否被拦截、运行时是否在安全时机读写尺寸。这三个点任何一个松动，鼠标滚轮就会“失联”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
