details标签仅支持原生垂直折叠/展开，不支持左右滑动；其语义为摘要-详情区块，强行用css模拟水平滑动会破坏无障碍支持与交互逻辑。

标签本身不支持左右滑动展示。

它只提供原生的垂直折叠/展开能力，浏览器对 details 的 open 状态切换不做任何过渡控制，也无法监听动画帧或注入 transform: translateX() 类似的位移动画。强行用 CSS 给 details 套水平滑动逻辑，结果只会是：样式失效、行为不可控、无障碍支持被破坏。

---

为什么不能用 details 实现左右滑动

• details 的展开收起由 UA（浏览器）内核直接控制，没有开放 transition 钩子
• 它的语义是“可折叠的摘要-详情区块”，不是“滑动容器”
• 所有试图用 max-width + overflow-x: auto 或 transform 强行模拟左右滑动的做法，都会绕过 details 的交互逻辑，导致：
  • 点击 summary 后内容不响应
  • 键盘操作（如 Space/Enter）失效
  • 屏幕阅读器无法正确播报状态变化
• 即使视觉上“看起来像滑动”，也已失去 details 存在的核心价值：语义化与无障碍

---

如果你真需要左右滑动，该用什么

• 纯 CSS 滚动容器（无 JS，适合静态内容）：

  • 外层设 overflow-x: auto + white-space: nowrap
  • 内部子元素设 display: inline-block 或 flex-shrink: 0
  • 隐藏滚动条可用 ::-webkit-scrollbar { display: none; }

• 带动画的滑动容器（需 JS 控制位置）：

  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
  • 用 transform: translateX() 移动内容区
  • 切换时更新 style.transform 并依赖 transition
  • 必须手动处理 touchstart/move/end 或 pointer events

• 语义正确 + 滑动可用的组合方案：

  • 用 section 或 div[role="region"] 作为滑动容器
  • 在其内部嵌套多个 details，作为每个滑动项里的「可展开二级区块」
  • 这样既保留了滑动主结构的可控性，又没丢掉细节内容的语义和无障碍支持

---

容易被忽略的关键点

• 不要为了“少写几行 JS”而牺牲语义和可访问性
• details 不是动画载体，它是交互契约——浏览器承诺它可键盘操作、可被读屏软件识别
• 所有“用 CSS 动画骗过眼睛”的方案，在残障用户或低配设备上大概率直接降级为不可用

滑动效果可以重做，但语义一旦错用，修复成本远高于从头选对标签。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！