CSS ::scroll-button ::scroll-marker伪元素又是干嘛用的？
💡
原文中文，约3600字，阅读约需9分钟。
📝
内容提要
本文介绍了CSS的新伪元素::scroll-button和::scroll-marker，分别用于自定义滚动按钮和序号切换，支持无障碍访问。通过示例展示了流畅的图片滑动效果，并强调了这些特性的兼容性要求。
🎯
关键要点
- ::scroll-button 伪元素用于自定义滚动按钮，::scroll-marker 伪元素用于自定义序号切换。
- 通过示例展示了流畅的图片滑动效果，且无需使用 JavaScript。
- ::scroll-button() 伪元素支持多种方向参数，允许自定义样式。
- ::scroll-marker 伪元素需要与 scroll-marker-group 属性配合使用。
- scroll-marker-group 属性控制索引序号组的显示位置。
- 本文介绍的伪元素需要 Chrome 135 及以上版本支持。
- ::column 伪元素也在同一时间支持，用于 CSS carousel 效果。
- ::scroll-button 和 ::scroll-marker 伪元素支持无障碍访问。
❓
延伸问答
::scroll-button 伪元素的主要功能是什么？
::scroll-button 伪元素用于自定义上下或左右的滚动按钮。
::scroll-marker 伪元素如何与其他属性配合使用？
::scroll-marker 伪元素需要与 scroll-marker-group 属性配合使用，以控制索引序号的显示位置。
使用 ::scroll-button 伪元素可以实现什么效果？
使用 ::scroll-button 伪元素可以实现流畅的图片滑动效果，无需使用 JavaScript。
这些新伪元素的兼容性要求是什么？
这些伪元素需要 Chrome 135 及以上版本支持。
::scroll-marker 伪元素的主要作用是什么？
::scroll-marker 伪元素用于自定义序号切换，适用于 CSS Scroll Snap 交互场景。
::scroll-button 伪元素支持哪些方向参数？
::scroll-button 伪元素支持多种方向参数，包括上、下、左、右等。
➡️
