默认滚动条美化需用::-webkit-scrollbar，但仅支持webkit内核；firefox需接受原生或js兜底；scroll-snap实现卡片停靠需结构规范；隐藏滚动条宜用mask而非display:none；transform动画与overflow-x不可混用。
overflow-x 默认滚动条丑，但不用 JS 就能改得体面。关键不是“能不能”，而是“改哪几处才不翻车”。
用 ::-webkit-scrollbar 改滚动条样式只对 Chrome / Edge / Safari 有效
Firefox 和旧版 IE 完全忽略这套伪元素，所以别指望它跨浏览器统一。实际项目里，要么接受 Firefox 显示原生滚动条，要么加 JS 库兜底（比如 simplebar）。如果你只面向现代桌面端，那下面这几行 CSS 就够用：
-
::-webkit-scrollbar控制整体宽度，设成8px是常见安全值，太细容易点不准 -
::-webkit-scrollbar-track轨道背景，建议用transparent或浅灰，别用深色配深色容器 -
::-webkit-scrollbar-thumb滑块本身，加border-radius: 4px和background: #999最稳 - 滑块 hover 状态必须加，否则用户找不到交互反馈 —— 用
::-webkit-scrollbar-thumb:hover提亮或加边框
scroll-snap-type: x mandatory 配合 flex 实现卡片级停靠
横向滚动如果只是“随便滑”，体验差；加了 scroll-snap 后，每次松手都会自动对齐到下一张图的左边缘。前提是结构干净：
- 外层容器必须设
overflow-x: auto、scroll-snap-type: x mandatory、scroll-behavior: smooth - 子项（每张图）要设
flex: 0 0 300px（或具体宽度）+scroll-snap-align: start - 别给子项设
margin-right，用gap更安全，避免 snap 错位 - 移动端测试时注意：iOS Safari 对
scroll-snap的兼容性比安卓 Chrome 弱，某些版本会忽略mandatory
隐藏滚动条但保留滚动能力，用 padding + mask 比 display: none 可靠
直接对 ::-webkit-scrollbar 设 display: none 会让滚动失效（尤其在 macOS 上），更稳妥的做法是视觉隐藏：
- 给容器加
padding-bottom: 16px，再用mask: linear-gradient(to bottom, black 80%, transparent 100%)盖住底部区域 - 或者用
overflow: overlay（仅 Webkit），滚动时才浮现，静止时不可见 - 如果必须彻底隐藏且允许 JS，就监听
scroll事件，在用户开始拖拽后动态加类显示滚动条，停顿 500ms 后再隐藏 - 注意：纯 CSS 隐藏方案在 Windows 触控屏上可能让滚动变得迟钝，需实测
transform: translateX() 动画轮播和 overflow-x 滚动条不能混用
想做自动滚动？别把 transform 动画和原生 overflow-x: auto 放一起。两者机制冲突：一个靠 JS 控制偏移，一个靠用户手势触发 scroll 事件，容易卡顿、跳帧、甚至丢失 touchend。
- 选一种路线到底：
overflow-x: auto+scroll-snap适合手动浏览；transform+setInterval适合自动播放 - 如果硬要“自动滚动 + 手动干预”，得用
scrollTo({ left: x, behavior: 'smooth' })，而不是直接改transform - 用
transform方案时，scrollbar样式完全无效 —— 因为根本没有原生滚动行为 - 性能上，
transform更顺，但无法被系统级滚动优化（比如 macOS 的惯性滚动）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
