overflow: hidden 必须加在外层容器上，不能加在 transform 元素自身，因其会忽略该属性；裁剪仅在有明确尺寸和 position: relative 的祖先容器上生效。
overflow: hidden 必须加在外层容器上，不能加在 transform 元素自身
浏览器对 transform 元素的 overflow: hidden 会忽略，尤其当它同时是 display: flex 或 position: absolute 时。裁剪行为只在具备布局约束的祖先容器上生效——也就是那个包裹动画/居中元素、有明确尺寸和 position: relative 的父级。
常见错误：把 overflow: hidden 写在 .carroussel-pelis 或 .content 上，结果溢出内容照常显示。
- ✅ 正确做法：
.carroussel-container { overflow: hidden; position: relative; } - ❌ 错误写法：
.carroussel-pelis { overflow: hidden; }（无效） - 若外层容器高度塌陷，需补充
min-height或确保子元素能撑开它
模态框用 transform: translate(-50%, -50%) 会导致滚动失效
这个组合看似居中很优雅，但它让元素“视觉偏移”，而滚动区域仍按原始盒模型计算——内容顶部被 translate 往上拉出父容器可视区，但滚动机制不知道该往上滚多远，导致顶部内容永远不可见。
典型症状：滚动条存在，但拖到最顶端仍看不到第一行文字；或只能滚动中间一段。
- ✅ 替代方案：改用
top: 50%; left: 50%; transform: translate(-50%, -50%);的父容器设为overflow: auto，且确保该父容器本身有固定高度或max-height - ⚠️ 更稳妥解法：放弃
transform居中，改用display: flex+align-items: center+justify-content: center，滚动行为天然可靠 - 不要依赖
margin-top: -Xpx或硬编码负值来模拟居中——响应式下极易错位
滚动条不出现？先查 ::-webkit-scrollbar { display: none } 是否全局生效
很多项目为了“美化”移动端体验，直接在全局样式里写了 ::-webkit-scrollbar { display: none }，结果桌面端也跟着消失，造成“明明内容溢出却没滚动条”的假象。
Chrome / Edge / Safari 默认滚动条是“隐藏式”，静止时不显示，只在拖动时浮现——这容易被误判为 bug。
- ✅ 快速验证：临时注释掉所有
::-webkit-scrollbar相关规则，看滚动条是否回归 - ✅ 精准控制：用媒体查询限定作用域，例如
@media (max-width: 768px) { ::-webkit-scrollbar { display: none; } } - ⚠️ 注意：某些 UI 库（如 Ant Design）会注入自己的 scrollbar 样式，需检查 DevTools 中的“Computed”面板确认最终生效值
html { overflow-y: scroll } 是防宽度跳动的唯一可靠写法
页面加载时滚动条出现/消失导致布局抖动，根源在于 body 宽度被滚动条侵占。但写 body { overflow-y: scroll } 基本无效——浏览器只认 html 元素的 overflow 控制视口级占位。
这是个极小但极关键的细节：写错层级，整个方案就失效。
- ✅ 必须写成：
html { overflow-y: scroll; } - ❌
body { overflow-y: scroll; }不起作用（除非 html 被显式设为overflow: visible） - 如果用了重置 CSS（如 normalize.css），它可能覆盖了你的
html规则，此时加!important是合理兜底 - 避免
html { overflow: scroll }——这会强制横纵滚动条都出现，可能引发新问题
transform 天然游离于这两者之外——它动的是渲染层，不是布局层。所以所有修复本质都是绕过它，而不是驯服它。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
