横向滚动作品集边界

大理论

横向滚动会改变用户默认阅读轴。它可以让作品集、画廊、摄影、项目卡和时间序列形成电影式比较，但它也会破坏正文阅读、文档浏览、表单填写和后台操作的连续性。因此横向滚动不是视觉风格，而是内容结构选择：只有当内容本身像一组短面板、图片、案例或阶段时才成立。

小知识点

1. 适用对象应是有限集合：作品卡、摄影图组、项目详情缩略图、品牌案例章节、时间线面板，而不是长文章或知识库正文。
2. 必须给出可见 affordance：露出下一张卡、进度条、左右按钮、拖拽提示或滚动阴影，不能让用户猜哪里能横向移动。
3. 键盘和焦点要跟得上：箭头按钮、Tab 顺序、focus-visible、焦点进入时自动滚到可见区域，不能让焦点停在屏幕外。
4. 触控端要优先原生滚动和 scroll snap；避免全局 wheel hijack 或长时间 pin 住页面，让用户误以为页面坏了。
5. 文字阅读必须单向完成：每个面板内的正文能在 320 CSS px 左右宽度下单独阅读，核心说明不要跨多个横向面板拆碎。
6. 小屏可以改为纵向堆叠、短 carousel 或卡片列表；横向滚动只是 desktop/宽屏增强，不应成为唯一入口。

设计判断

如果用户不使用精准触控板也能发现横向区、浏览所有项目、阅读当前面板、跳过或继续向下，这个横向滚动是可用的。如果用户需要左右试探才能读完一句话或找到 CTA，它就是错误容器。

实现建议

用局部容器承载横向滚动：overflow-x: auto、scroll-snap-type: x proximity 或在短卡片组上使用 mandatory、scroll-padding-inline、稳定卡片宽度和可见下一项。提供真实 button 控制 scrollBy，为容器添加 aria-label，按钮状态同步 scrollLeft。在 prefers-reduced-motion 下关闭 smooth scroll；在移动断点改为纵向 flow 或可滑动卡片，并用 Playwright 验证 scrollLeft、Tab 顺序、焦点可见、320 CSS px reflow 和底部页面可达。

反例/风险

把整篇文章做成横向阅读；隐藏浏览器滚动条且没有按钮；只支持鼠标滚轮转横向；CTA 在最后一屏但没有进度提示；卡片里正文需要横向滚动才能读完；移动端出现页面级横向溢出；scroll snap 过硬导致用户无法停在需要的位置。

案例分析

Awwwards 的 Scrolling 主题页明确区分垂直和横向滚动：垂直滚动是浏览器阅读中最常见的方式，而横向滚动更适合作品集和画廊，不太适合文本驱动站点。Nine To Five 获得 Awwwards Site of the Day（2026-04-08），页面列出 Homepage Scroll、Project Detail，并被收录在 Horizontal Layout Websites 集合中；Inkfish 获得 Site of the Day（2024-05-23），其 Awwwards 元素包括 Horizontal Scroll、Video Player、Work Hover 和 Page Transition。可学习点是：横向滚动应绑定项目浏览、作品预览、视频/图像节奏和短面板，而不是把所有正文都转成横轴阅读。

来源链接

Awwwards Scrolling: https://www.awwwards.com/websites/scrolling/ Awwwards Nine To Five: https://www.awwwards.com/sites/nine-to-five Awwwards Inkfish: https://www.awwwards.com/sites/inkfish W3C WCAG Reflow: https://www.w3.org/WAI/WCAG21/Understanding/reflow.html MDN CSS Scroll Snap: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap