::scroll-button() 仅 Chrome/Edge 129+ 支持，需真实滚动容器（溢出+overflow:auto/scroll）、正确方向（如up非top）与content值（如"▶"），默认滚动约85%容器宽高，不触发JS事件，无障碍友好但无跨浏览器纯CSS方案。
::scroll-button() 目前仅在 Chrome 129+ 和 Edge 129+ 中受支持，Firefox 和 Safari 尚未实现。直接用它加翻页按钮，前提是目标用户使用新版 Chromium 内核浏览器，且容器本身是有效的滚动上下文。
确保容器是可滚动的 scroll container
不是所有设置了 overflow: auto 的元素都能触发 ::scroll-button()。它只对“真实滚动容器”生效——即内容实际溢出、且浏览器为其创建了滚动视口的元素。
- 必须显式设置
overflow-x或overflow-y为auto、scroll或hidden（但hidden会导致按钮不可用） - 子元素总尺寸需超出容器尺寸，否则不会生成滚动能力
- 避免
overflow: visible或未设 overflow —— 此时伪元素会渲染但处于:disabled状态，点击无反应 - 若用
scroll-snap-type，建议搭配scroll-behavior: smooth，否则按钮点击滚动会生硬
正确声明方向与 content 值
::scroll-button() 的方向参数必须是规范值，且 content 必须为合法的 content 属性值（字符串、url()、attr() 等），否则按钮不显示。
- 支持物理方向：
left、right、up、down；逻辑方向：inline-start、inline-end、block-start、block-end - 错误写法：
::scroll-button(top)（应为up）、::scroll-button('left')（引号非法） -
content不能是空字符串或none；推荐用 Unicode 箭头如"◀"、"▶"，或 SVG data URL - 按钮默认插入在容器内部末尾位置，若需精确定位（比如贴右/贴底），得配合
position: absolute和anchor-name+position-anchor
按钮点击后滚动距离不是整屏？注意 scroll-snap 和容器尺寸
点击 ::scroll-button(right) 默认滚动约容器宽度的 85%，不是精确到下一个 scroll-snap-align 项——这点常被误认为“失效”。实际行为由浏览器控制，无法通过 CSS 调整步长。
立即学习“前端免费学习笔记（深入）”；
- 若你期望严格对齐每个子项（如轮播图一图一停），必须同时启用
scroll-snap-type: x mandatory和子项scroll-snap-align: start - 滚动距离受容器
width/height、padding、border影响；若容器宽高为100vw/100vh，但含padding: 20px，则实际可视区域变小，85% 计算基准也变小 - 不要依赖按钮滚动去触发 JS 事件——它不派发
scroll或click，纯原生行为，无法监听 - 无障碍方面，按钮自带
role="button"和键盘焦点支持，无需额外tabindex
真正麻烦的是兼容性兜底：目前没有跨浏览器的纯 CSS 翻页方案。Chrome 里用 ::scroll-button() 很优雅，但一旦要支持 Firefox 或 Safari，就得回退到 scrollBy() + 按钮 DOM 控制，或用 scroll-snap 配合锚点跳转。别指望一个伪元素解决所有场景——它只是滚动体验的增强，不是替代。
