删掉-webkit-overflow-scrolling: touch，它在现代Safari/Chrome中已废弃，残留会强制降级滚动引擎、导致惯性丢失和touchmove阻塞；滚动容器必须设明确height或max-height，否则overflow-y:auto不触发滚动；Flex子项需配合flex:1+overflow-y:auto；overscroll-behavior:contain仅防穿透，不解决卡顿；content-visibility:auto必须配contain-intrinsic-size（如160px），否则高度归零引发跳变；所有监听scroll/touchmove事件必须加{passive:true}。
删掉 -webkit-overflow-scrolling: touch，它不是“没加才卡”，而是“加了必卡”——现代 Safari 和 Chrome 已废弃该属性，残留会强制降级旧滚动引擎，惯性丢失、touchmove 阻塞主线程。
滚动容器必须有明确高度约束
没有 height 或 max-height，overflow-y: auto 在移动端根本不会触发可滚动行为，列表直接“瘫”在页面里不动。
- 父容器用
height: 100vh或max-height: 70vh（留出头部/底部空间） - 避免用
min-height替代——它不截断内容，无法生成滚动区域 - 如果容器是 Flex 子项，确保父级设了
display: flex; flex-direction: column，且自身设flex: 1+overflow-y: auto
overscroll-behavior: contain 只管穿透，不管卡顿
它解决的是“滑到底还带整个页面一起动”的问题，不是性能开关。写错地方反而更涩：比如套在 body 上，iOS 会丢掉弹性回弹；套在无溢出内容的容器上，等于白写。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 只加给真实可滚动且内容高度 > 容器高度的元素，例如
.comment-list、.modal-content - 必须配合
overflow-y: auto（不能是hidden或scroll） - 别和
will-change: transform混用——后者升 GPU 图层，前者只改行为，叠加无收益
content-visibility: auto 不配 contain-intrinsic-size 就是自毁
只写 content-visibility: auto，浏览器会把所有离屏项高度算成 0，滚动条猛缩、内容上跳、手指拖动错位——这不是 bug，是你没兑现尺寸承诺。
立即学习“前端免费学习笔记（深入）”；
- 固定高卡片：加
contain-intrinsic-size: 120px - 文字流式项（含多行）：写
contain-intrinsic-size: 160px（宁大勿小） - 禁用
%、em、rem——移动端必须用px - Flex/Grid 直接子项慎用：它们的对齐逻辑会和 size containment 冲突，优先在 item 自身加
真正卡顿的源头往往藏在看不见的地方：一个没关 passive: true 的 scroll 监听器、一个被 JS 动态注入的 -webkit-overflow-scrolling: touch、或者 DevTools Layers 面板里悄悄堆到 15 层的合成图层——这些比“怎么写 CSS”更决定滚动是否顺手。
