Back to Details

scroll-areas

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Scroll Areas

滚动区域

Avoid Scroll Areas by Default

默认避免滚动区域

Scroll containers inside a layout — panels, drawers, tables, modals with inner overflow — create friction. Users must discover that a region scrolls, manage multiple independent scroll positions simultaneously, and context-switch between scroll areas on the same screen.
Default: let the page scroll. A single page-level scroll is universally understood and requires no discovery. Before introducing an inner scroll area, ask whether the layout can be restructured so the page itself handles the overflow.
Alternatives to inner scroll:
  • Pagination or load-more for long lists
  • Collapsible sections (accordion) for long detail panels
  • A separate page or route for content that would otherwise fill a scroll area
  • Progressive disclosure — show less by default, expand on demand
布局内的滚动容器——面板、侧边栏、表格、带有内部溢出的模态框——会增加用户操作阻力。用户必须发现某个区域可滚动，同时管理多个独立的滚动位置，并在同一屏幕的不同滚动区域之间切换上下文。
默认方案：让页面整体滚动。单页面级滚动是用户普遍理解的操作，无需额外探索。在引入内部滚动区域之前，请先考虑是否可以重新调整布局，让页面本身处理溢出内容。
内部滚动的替代方案：
  • 对长列表使用分页或加载更多功能
  • 对长详情面板使用可折叠区块（手风琴组件）
  • 将原本需要滚动区域的内容放在单独页面或路由中
  • 渐进式展示——默认显示少量内容，按需展开

When a Scroll Area Is Justified

当滚动区域确有必要时

Some layouts genuinely require inner scroll:
  • Fixed-height sidebars with navigation trees longer than the viewport
  • Data tables where the header must remain visible while rows scroll
  • Chat or log panels where the stream is continuous and the surrounding layout is fixed
  • Code editors or terminal panes embedded in a larger application shell
In these cases, proceed — but apply the constraints below.
某些布局确实需要内部滚动：
  • 固定高度侧边栏：导航树长度超过视口时
  • 数据表：需要保持表头可见，同时滚动查看行内容
  • 聊天或日志面板：内容持续更新，且周围布局固定
  • 代码编辑器或终端窗格：嵌入在更大的应用框架中
在这些情况下可以使用滚动区域，但需遵守以下约束。

One Axis Only

仅单轴滚动

Never create a scroll container that scrolls on both axes simultaneously. Two-axis scroll is disorienting, hard to control precisely, and nearly unusable on touch devices.
css
/* One axis: vertical */
overflow-y: auto;
overflow-x: hidden;

/* One axis: horizontal (e.g. wide table) */
overflow-x: auto;
overflow-y: hidden;

/* Never */
overflow: auto; /* allows both axes */
If content requires both axes — e.g. a wide table inside a constrained panel — restructure the layout so the table's horizontal scroll is the only scroll in the view, with the page itself not scrolling at that point.
绝不要创建同时支持两个轴滚动的容器。双轴滚动会让用户迷失方向，难以精确控制，在触摸设备上几乎无法使用。
css
/* 单轴：垂直滚动 */
overflow-y: auto;
overflow-x: hidden;

/* 单轴：水平滚动（例如宽表格） */
overflow-x: auto;
overflow-y: hidden;

/* 禁止使用 */
overflow: auto; /* 允许双轴滚动 */
如果内容需要双轴滚动——例如受限面板内的宽表格——请重新调整布局，使表格的水平滚动成为视图中唯一的滚动方式，此时页面本身不滚动。

Always User-Controlled

始终由用户掌控

Scroll must never happen automatically without user intent. Specifically:
  • No auto-scrolling that moves the viewport without the user initiating it
  • No scroll hijacking — do not intercept the native scroll event to animate or pace it artificially
  • Scroll-to on load is acceptable only when restoring a previous scroll position (e.g. returning to a list after navigating away)
  • Scroll-to for errors or anchors is acceptable as a response to a user action (submitting a form with errors, clicking a table-of-contents link)
Exception: chat and log panels may auto-scroll to the bottom on new content, but only if the user is already at the bottom. If the user has scrolled up to read, do not force them back down — show a "new messages" indicator instead.
滚动绝不能在未经用户意图的情况下自动触发。具体要求：
  • 禁止自动滚动：不得在用户未发起操作时移动视口
  • 禁止滚动劫持：不要拦截原生滚动事件来人为设置动画或调整滚动速度
  • 加载时滚动定位仅在恢复之前的滚动位置时可接受（例如从详情页返回列表页）
  • 针对错误或锚点的滚动定位可作为用户操作的响应（例如提交包含错误的表单、点击目录链接）
例外情况：聊天和日志面板在有新内容时可自动滚动到底部，但仅当用户当前已处于底部时。如果用户已向上滚动查看历史内容，请勿强制滚动到底部——而是显示“新消息”提示。

Scroll Affordance

滚动提示

Users must be able to tell a region is scrollable before they attempt to scroll it.
  • Clip content visually at the edge — a partially visible item signals "there is more"
  • Use a subtle scrollbar (not 
    scrollbar-width: none
    ) so the track is visible
  • On touch, a partial item at the edge is the primary affordance — ensure the container does not have 
    overflow: hidden
    on the trailing edge
用户必须能够在尝试滚动前判断某个区域是否可滚动。
  • 在边缘处视觉裁剪内容——部分可见的项目暗示“还有更多内容”
  • 使用细微的滚动条（不要设置
    scrollbar-width: none
    ），让滚动轨道可见
  • 在触摸设备上，边缘处的部分可见项目是主要提示——确保容器在末尾边缘不设置
    overflow: hidden

Review Checklist

审核清单

  • Is every inner scroll area genuinely necessary, or can the layout be restructured to use page scroll?
  • Does every scroll container scroll on one axis only?
  • Is 
    overflow: auto
    (two-axis) avoided on all scroll containers?
  • Is scroll always user-initiated — no hijacking, no forced auto-scroll?
  • Is the scrollable region visually apparent (partial content, visible scrollbar)?
  • On touch devices, is scroll smooth and native (
    -webkit-overflow-scrolling: touch
    or equivalent)?
  • 每个内部滚动区域是否确实必要？是否可以重新调整布局以使用页面滚动？
  • 每个滚动容器是否仅支持单轴滚动？
  • 是否所有滚动容器都避免使用
    overflow: auto
    （双轴滚动）？
  • 滚动是否始终由用户发起——无劫持、无强制自动滚动？
  • 可滚动区域是否在视觉上明显（部分内容可见、滚动条可见）？
  • 在触摸设备上，滚动是否流畅且原生（使用
    -webkit-overflow-scrolling: touch
    或等效属性）？