应选 overflow: hidden 或 auto 并配合 box-sizing: border-box，避免因 padding/border 导致的横向滚动条；移动端需加 -webkit-overflow-scrolling: touch 兼容 iOS；注意 overflow-x/y 不一致时的裁剪陷阱及滚动条样式占位问题。
overflow属性值选哪个才不出现多余滚动条
多数人加了 overflow: auto 或 overflow: scroll 后，发现容器莫名其妙多出横向滚动条，哪怕内容明明没超宽。根本原因是：浏览器默认会把 padding 和 border 算进宽度，但内容区域（content box）撑开后，总宽可能超出设定值。
真正该用的是 overflow: hidden 或 overflow: auto，但必须配合 box-sizing: border-box —— 否则 padding 一加，内容区就挤出边界，触发横向溢出。
-
overflow: hidden：粗暴裁剪，适合卡片、头像等不允许滚动的场景 -
overflow: auto：只在内容真溢出时显示滚动条，比scroll更克制 -
overflow: scroll：不管有没有溢出，都强制显示滚动条（含空占位），iOS Safari 下还可能卡顿
移动端 touch 滚动失效？别漏掉 -webkit-overflow-scrolling
iOS Safari 旧版（iOS 12 及之前）对 overflow: auto 容器的 touch 滚动支持极差：滑动生涩、回弹无力、甚至完全不动。这不是 bug，是默认关闭了硬件加速滚动。
补上这行就能恢复原生手感：
立即学习“前端免费学习笔记（深入）”；
div {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
注意：-webkit-overflow-scrolling: touch 是 iOS 专属，现代 iOS 已逐步弃用，但老项目或兼容性要求高时仍得加；Android Chrome 不需要它，加了也无害。
- 必须和
overflow同时存在才生效 - 设为
auto或scroll才起作用，hidden下无效 - 开启后，该容器会创建独立的合成层（compositing layer），慎用于频繁动画的区域
overflow-x 和 overflow-y 值不一致时的隐藏陷阱
写 overflow-x: hidden; overflow-y: auto 很常见，比如表格固定表头、弹窗内容区。但很多人没意识到：当两个方向行为不同，浏览器会按“更激进”的那个来决定是否创建滚动上下文。
典型问题：父容器设了 overflow-x: hidden，子元素却用了 position: absolute + 负 left 偏移，结果被裁掉——不是因为子元素溢出，而是父容器的 hidden 直接截断了渲染树。
-
overflow-x: hidden对absolute/fixed元素同样生效（只要父元素不是static定位） - 想让子元素“逃出”裁剪？把父容器
overflow改成visible，或改用clip-path替代 -
overflow-y: scroll+overflow-x: hidden组合，在 Firefox 中可能意外触发横向滚动条（因 scrollbar 占宽），建议统一用auto
滚动条样式怎么改又不影响布局
直接改 ::-webkit-scrollbar 很方便，但容易踩坑：一旦设了 width 或 height，滚动条就会“占位”，导致内容区实际可用宽度变小，引发二次溢出。
正确做法是用 scrollbar-width（Firefox）和 scrollbar-color（仅 color），它们不占布局空间；WebKit 内核下，用 ::-webkit-scrollbar 时必须配 display: none 或透明背景，避免干扰。
- Firefox 支持
scrollbar-width: thin | auto | none，none会彻底隐藏但保留滚动能力 - Chrome/Edge 中，
::-webkit-scrollbar的width设为0不等于隐藏，得加display: none - 所有自定义滚动条都不影响
scrollWidth/scrollHeight计算，JS 获取尺寸时无需特殊处理
overflow 值，可能牵出三个方向的兼容性表现。最常被忽略的是：父容器的 overflow 会成为子元素 position: absolute 的包含块边界，这点在模态框和下拉菜单里几乎必踩。 
