滚动区域
用平台自己的滚动方式滚动内容的框。在它关注的每条边上，用表面颜色的渐变带、内容本身的渐隐、一条线或模糊来表示边外还有内容，既不改变自身尺寸，也不移动内容。
- 类别
- 容器
- 令牌
comp.scroll-area- 层级
- 基础
- Web
tanrei-scroll-areaclock_loader_40 - SwiftUI
TanreiScrollArearadio_button_unchecked - Jetpack Compose
TanreiScrollArearadio_button_unchecked - Flutter
TanreiScrollArearadio_button_unchecked - React Native
ScrollArearadio_button_unchecked
生成自 docs/status/status.json, specs/scroll-area.spec.json
固定高度框中的列表
内容放得下时，区域自己什么也不绘制。滚动试试：下方还有内容时，底边会被标示；一旦有内容滚出上方的视野，顶边也会被标示。
Web 和 React 的示例展示的是当前的规格。SwiftUI、Compose、Flutter 和 React Native 尚在计划中：它们还没有提供滚动区域。
<!-- 尺寸由布局给出；默认标示顶边和底边。 -->
<tanrei-scroll-area label="消息" style="block-size: 20rem">
…
</tanrei-scroll-area>
<!-- 在 filled 卡片上：阴影取卡片的颜色，让列表沉入卡片。 -->
<tanrei-scroll-area label="结果" style="--tanrei-comp-scroll-area-shadow-color: var(--tanrei-comp-card-filled-container-color); block-size: 16rem">
…
</tanrei-scroll-area>
<!-- 在图片或视频上：让内容本身渐隐，不绘制任何颜色。 -->
<tanrei-scroll-area scroll-edge="fade" label="字幕">…</tanrei-scroll-area>
<!-- 横向滚动的一行：标示起始边和结束边。 -->
<tanrei-scroll-area edges="start end" label="照片">…</tanrei-scroll-area>
<script type="module">
import '@tanrei/web/components/scroll-area';
</script>import { ScrollArea } from '@tanrei/react';
<ScrollArea label="消息" style={{ blockSize: '20rem' }}>
{messages}
</ScrollArea>
{/* 在 filled 卡片上：阴影取卡片的颜色。 */}
<ScrollArea
label="结果"
style={{ '--tanrei-comp-scroll-area-shadow-color': 'var(--tanrei-comp-card-filled-container-color)', blockSize: '16rem' } as React.CSSProperties}
>
{results}
</ScrollArea>
<ScrollArea scrollEdge="fade" label="字幕">{captions}</ScrollArea>
<ScrollArea edges={['start', 'end']} label="照片">{photos}</ScrollArea>滚动边缘：shadow（默认系统的选择）、fade、line、blur 和 none
阴影。一条使用区域所在表面颜色的渐变带，在边缘处最浓，到距边缘 24 处消失。滚动后顶边也会被标示。内容看起来像是沉入了表面。
渐隐。内容本身朝边缘逐渐淡出，不绘制任何颜色，因此区域背后的东西会透出来。滚动后顶边也会被标示。
线条。边外还有内容时，沿边缘画一条分隔线颜色的细线。滚动后顶边也会出现线条，底边的线条则会消失。
模糊。内容在深 48 的带中被模糊，边缘处最强，到带的内侧端不再模糊。滚动后顶边也会被标示。
无。边缘不做任何标示，只有平台的滚动条表示内容还在继续。滚动它，和其他几个比较一下。
构成
| 部件 | 说明 |
|---|---|
1 container | The scroll box: as large as its layout gives it, scrolling the content up and down, sideways or both where it does not fit, with the platform's own scrolling and scroll bars. It has no fill, edge or corner of its own. |
2 content | Whatever the product puts in it: a list, a column of cards, a form, a row of pictures. The area lays nothing out and styles nothing inside it. |
3 scroll-edge · 可选 | The mark at one edge of the box while content lies beyond that edge: a band in the color of the surface the box stands on, full at the edge and none at its inner end; a fade of the content itself toward the edge; a line along it; or a band in which the content is blurred, most at the edge. Drawn over the content (the fade, on it), taking no input. |
4 focus-ring · 可选 | The system's focus indicator inside the box's edge, while the box itself has keyboard focus. |
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
scrollEdge | auto | shadow | fade | line | blur | none | "auto" | How an edge shows that content lies beyond it. shadow: a band in the color of the surface the area stands on, so that the content sinks into the surface. fade: the content itself fades out toward the edge and no color is drawn, for a transparent surface, a picture or a video behind the area. line: a hairline along the edge. blur: the content blurred in a band along the edge, most at the edge. none: nothing. auto takes comp.scroll-area.scroll-edge, the design system's answer, which follows sys.behavior.scroll-edge (shadow in the default system). |
edges | strings | top,bottom | Which edges show the scroll edge: any of top, bottom, start and end. start is the left in a left-to-right layout and the right in a right-to-left one. |
label | string | "" | The name of the scroll box, for the moments it is a focus stop of its own (SCA-10): what it holds ("Messages", "Results"). Never drawn. |
插槽
| 插槽 | 说明 |
|---|---|
default | The content the area scrolls. A fixture's string is drawn as plain text in it. |
状态
行为
以 EARS 形式写成的需求。每个平台的实现都按这些 ID 逐条测试。需求原文取自规格文件，原样以英文呈现。
| ID | 需求 |
|---|---|
SCA-1 | THE scroll area SHALL be as large as its layout gives it, SHALL lay its content out at its own width, and WHERE the content does not fit SHALL scroll it with the platform's own scrolling — wheel, trackpad, touch, scroll bars, keyboard and assistive technology — in each direction it does not fit; it SHALL draw no fill, edge, corner or elevation of its own, and SHALL NOT replace the platform's scroll bars. |
SCA-2 | WHILE content lies beyond an edge that edges names — the content is scrolled away from that edge, so that some of it is out of view past it — THE scroll area SHALL draw the scroll edge of that edge in the form its scroll edge (SCA-7) names; WHILE nothing lies beyond it, or the edge is not named, THE scroll area SHALL draw none there. Each edge SHALL be drawn and faded by itself: content beyond the top and none beyond the bottom draws the top edge only. |
SCA-3 | WHILE the scroll edge is shadow THE scroll area SHALL draw over the content, along the whole length of the edge and inside the box, a band comp.scroll-area.shadow.extent deep in comp.scroll-area.shadow.color — the color of the surface the area stands on, not a color of its own — full at the edge and falling smoothly to none at the band's inner end, and SHALL draw no line. |
SCA-4 | WHILE the scroll edge is fade THE scroll area SHALL fade the content itself along the edge, none of it shown at the edge rising smoothly to all of it at comp.scroll-area.fade.extent in from it, SHALL draw no color and no line, so that whatever lies behind the area — a transparent surface, a picture, a video — shows through where the content fades. |
SCA-5 | WHILE the scroll edge is line THE scroll area SHALL draw it as a line comp.scroll-area.line.width thick in comp.scroll-area.line.color along the whole length of the edge, inside the box. |
SCA-6 | WHILE the scroll edge is blur THE scroll area SHALL blur the content lying in a band comp.scroll-area.blur.extent deep along the edge, by comp.scroll-area.blur.radius at the edge falling to none at the band's inner end, in comp.scroll-area.blur.layers layers of evenly stepped radius, each masked to its part of the band so that no step is seen, and SHALL draw no line and no tint: the scroll area has no fill of its own to tint with. |
SCA-7 | THE scroll area SHALL take its scroll edge from scrollEdge: WHILE scrollEdge is auto, as comp.scroll-area.scroll-edge names, which follows sys.behavior.scroll-edge unless a design system sets the scroll area apart; WHILE it is shadow, fade, line, blur or none, as that value names, whatever the tokens say. WHEN scrollEdge, or the token it follows, changes THE scroll area SHALL draw the other form at once, keeping the scroll position and focus. |
SCA-8 | WHEN content starts or stops lying beyond an edge THE scroll area SHALL fade that edge's scroll edge in or out over comp.scroll-area.motion.duration with comp.scroll-area.motion.easing, and at once where motion is reduced; it SHALL NOT change its size, move the content, or change anything else it draws because of the scroll edge. It SHALL learn whether content lies beyond an edge from what the platform already knows of the scroll — its notice that a mark at that end of the content has entered or left the box, or the scroll's own extents — and SHALL NOT measure the content's layout in a frame of a scroll. |
SCA-9 | WHERE the platform cannot blur what lies behind a band (a browser without backdrop filters, Android before version 12, a platform where the product gave no blur view) THE scroll area SHALL draw shadow (SCA-3), the system's first form, in place of a blur; WHERE the platform draws with a person's own forced colors THE scroll area SHALL draw the line of SCA-5 in the platform's text color in place of a shadow, a fade or a blur. |
SCA-10 | WHILE the content does not fit and nothing inside the box takes keyboard focus THE scroll area SHALL make the box itself one stop in the focus order, exposed as a region named by label, so that a keyboard can scroll it (WCAG 2.1.1); WHILE something inside takes focus, or the content fits, THE scroll area SHALL NOT be a focus stop and SHALL expose no role of its own. WHILE it is a focus stop and label is empty it SHALL still be focusable, and in debug builds report that the region has no accessible name. |
SCA-11 | WHILE the box has keyboard focus THE scroll area SHALL show it as sys.behavior.focus-style names (ring or glow), drawn wholly inside its edge so that nothing around the box covers it, over every scroll edge and never faded by one, without animation, and never for focus gained by pointer or touch; a platform that cannot draw a choice SHALL fall back to the first value and state that in its README. |
SCA-12 | THE scroll area SHALL draw every scroll edge over the content (the fade, on the content itself), hidden from assistive technology, and SHALL let every press, hover and scroll over it reach the content under it. |
SCA-13 | WHERE the layout direction is right-to-left THE scroll area SHALL take start as its right edge and end as its left edge, SHALL begin a sideways scroll at the right, and SHALL mirror no scroll edge otherwise: each form is drawn the same toward whichever edge it stands at. |
SCA-14 | THE scroll area SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the area is shown THE scroll area SHALL draw itself for the new direction at once, keeping its scroll position from the start edge. |
SCA-15 | IF scrollEdge names a value the component does not define THE scroll area SHALL treat it as auto, IF edges names a value other than top, bottom, start and end THE scroll area SHALL ignore it, and in debug builds report the unknown value. |
SCA-16 | WHILE the text size is enlarged THE scroll area SHALL keep its scroll edges at their sizes and lay out the larger content, which scrolls further: a scroll edge is a mark of the box, not of its text. |
SCA-17 | THE scroll area SHALL have no words of its own and SHALL read none of the product's words: label names this one region. |
SCA-18 | WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE scroll area SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on its box — an id reference by the elements it names in the host's tree or a tree around it, a description after its own — but a name only while the box is a focus stop and a region (SCA-10): then label is its name over a name given so, and while label is empty a name given so is its name and SHALL NOT be reported as having none in debug builds. WHILE the box is not a focus stop it has no role a name could stand on: THE scroll area SHALL expose no name the product gives on the host, and SHALL report it in debug builds. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE scroll area SHALL take it off the box. |
各平台名称对照
对等并不意味着 API 完全相同。同一份契约，由各平台以自己的惯用方式表达。
| 规格 | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| 组件 | tanrei-scroll-area | TanreiScrollArea | TanreiScrollArea | TanreiScrollArea | ScrollArea |
scrollEdge · 属性 | scrollEdge | scrollEdge | scrollEdge | scrollEdge | scrollEdge |
edges · 属性 | edges | edges | edges | edges | edges |
label · 属性 | label | label | label | label | label |
| 备注 | <tanrei-scroll-area scroll-edge edges="top bottom" label>; edges is a space-separated attribute and an array property. Whether content lies beyond an edge is read from one IntersectionObserver on four thin sentinels at the ends of the content (SCA-8): no scroll listener, no layout read while scrolling. Not CSS scroll-driven animations: they are not in every engine, and they tie the mark to the distance scrolled rather than fading it over the state motion. shadow is a gradient band per edge in --tanrei-comp-scroll-area-shadow-color; set that custom property on the element, or on an ancestor, to the surface it stands on. fade is a mask-image on the scroll box, one gradient per axis, moved by mask-position and mask-size (no registered custom property), so the browser's scroll bar fades with the content at a faded edge. blur is blur.layers layers inside each band, each with backdrop-filter: blur(r × i / n) and a mask-image gradient; @supports not (backdrop-filter: blur(1px)) draws shadow (SCA-9). Every mark is pointer-events: none and aria-hidden. A fixture fills the slot with enough lines (or a row wide enough) to scroll, in a box of a fixed size, scrolled to the middle. | A ScrollView. onScrollGeometryChange tells whether content lies beyond an edge. shadow is a LinearGradient overlay from the surface color; fade a mask of a gradient; on iOS 26 and macOS 26 blur is the system's scrollEdgeEffectStyle(.soft, for:) and line .hard with the line drawn by Tanrei, before them blur is a Material band under a gradient mask. | A verticalScroll/horizontalScroll box (or the product's lazy list through a ScrollState/LazyListState parameter); canScrollBackward/canScrollForward tell the edges. shadow is a drawWithContent gradient in the surface color; fade a BlendMode.DstIn gradient on an offscreen layer; blur draws the band's content again under graphicsLayer { renderEffect = BlurEffect(…) } with a gradient mask on API 31 and later, and shadow below it. | A SingleChildScrollView (or the product's scrollable via its ScrollController); ScrollMetrics.extentBefore/extentAfter, read in a NotificationListener<ScrollMetricsNotification>, tell the edges. shadow is a DecoratedBox gradient in the surface color; fade a ShaderMask with BlendMode.dstIn; blur BackdropFilter bands under ShaderMask. | A ScrollView; onScroll with scrollEventThrottle and the content size tell the edges, and the edge state is set only when it changes. shadow is a gradient view in the surface color where the product passes a gradient component, else a stack of translucent strips; fade needs a masked view the product passes, and is drawn as shadow without it. React Native has no blur of its own: blur is drawn only where the product passes a blur view component; otherwise shadow (SCA-9). |
令牌
| 令牌 | 引用 | 解析值（浅色） |
|---|---|---|
--tanrei-comp-scroll-area-blur-extent | sys.scroll-edge.blur.extent | 48px |
--tanrei-comp-scroll-area-blur-layers | sys.scroll-edge.blur.layers | 4 |
--tanrei-comp-scroll-area-blur-radius | sys.scroll-edge.blur.radius | 8px |
--tanrei-comp-scroll-area-fade-extent | sys.scroll-edge.extent | 24px |
--tanrei-comp-scroll-area-line-color | sys.color.outline-variant | |
--tanrei-comp-scroll-area-line-width | sys.border.hairline | 1px |
--tanrei-comp-scroll-area-motion-duration | sys.motion.role.state.default | 250ms |
--tanrei-comp-scroll-area-motion-easing | sys.motion.easing.state | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-scroll-area-scroll-edge | sys.behavior.scroll-edge | 0 |
--tanrei-comp-scroll-area-shadow-color | sys.color.surface | |
--tanrei-comp-scroll-area-shadow-extent | sys.scroll-edge.extent | 24px |
测试样例
作为基准的渲染结果。所有平台都以相同的 ID 为每个样例截取快照，以便相互比较。
default
label: Messages slots: default fade
scrollEdge: fade label: Messages slots: default line
scrollEdge: line label: Messages slots: default blur
scrollEdge: blur label: Messages slots: default none
scrollEdge: none label: Messages slots: default sideways
edges: ["start","end"] label: Photos slots: default rtl-sideways
edges: ["start","end"] label: Photos direction: rtl slots: default 生成自 specs/scroll-area.spec.json, tokens/comp/scroll-area.tokens.json, design/tokens/
当布局给屏幕的某一部分固定的尺寸，而其中的内容可能更长时，使用滚动区域：对话旁边的消息列表、搜索字段下方的结果、窗格里的长表单、横向滚动的一行图片。区域让内容留在你放置的位置，并在它关注的每条边上表示边外还有内容。
自己会滚动的组件——表格、对话框的内容、面板——外面不需要它，页面外面也不需要：页面自身的滚动没有需要标示的边。对话框、面板、弹出框和应用栏会在固定部分与滚动内容相接的地方自己画线。
| 形式 | 用于 |
|---|---|
shadow |
不透明的表面：内容沉入其中。渐变带使用区域所在表面的颜色，而不是一种自己的灰色。这是默认系统的选择。 |
fade |
区域背后是透明表面、图片或视频。内容本身淡出，不绘制颜色，因此背后的东西会透出来。 |
line |
用线条标示边缘的产品，以及渐变带会遮住太多内容的高密度布局。线条是分隔线颜色的细线。 |
blur |
栏和边缘是半透明的产品：内容在边缘处变得柔和。它的绘制成本最高（见下文）。 |
none |
边缘本身就可以保持原样的框，例如滚动条始终显示、已经足够说明问题的框。 |
每条边单独绘制，并且只在边外还有内容时绘制：在列表顶部，只有底边被标示。情况变化时，边缘的标示会渐入或渐出；在减弱动态效果时则立即切换。标示从不改变区域的尺寸，也从不移动内容。
edges 指定关注哪些边：默认是 top 和 bottom，横向滚动的一行用 start 和 end。在从左到右的布局中 start 是左边，在从右到左的布局中是右边。
阴影是一条表面自身颜色的渐变带，叠在内容上，在边缘处最浓。在它的颜色所指的表面上，它与表面无缝相接；在其他表面上，它看起来就是一块颜色不对的污迹。comp.scroll-area.shadow.color 默认是普通表面（sys.color.surface）。当区域放在另一种表面上——卡片、面板、某种容器颜色——请把它设为那个表面的颜色：在层中设置，作用于放在那里的所有滚动区域；或者只在这一个实例上设置。在 Web 上，这是 --tanrei-comp-scroll-area-shadow-color 自定义属性，设置在元素或其祖先上。
如果区域背后没有不透明的东西——半透明的面板、图片、视频——那就没有哪种颜色是对的。这时请选择 fade。
模糊会在滚动的每一帧中，把带中的内容模糊后再画一遍：comp.scroll-area.blur.layers 层半径逐级变化的图层（默认系统中为 4 层，边缘处半径最大为 8，带深 48）。在产品的外观需要它的地方使用，并保持一个屏幕上最多两条模糊边缘——一个列表的顶边和底边，而不是每个窗格。当平台无法模糊带后面的内容时（没有背景滤镜的浏览器、Android 12 之前的版本、产品没有传入模糊视图的 React Native），区域会改为绘制 shadow，所以即使选择了模糊，也要设置阴影的颜色。
用什么标示滚动框的边缘，是产品只需做一次的种类选择：它的列表、表单和窗格不应各用一种方式标示边缘。
tanrei.sys.behavior.scroll-edge
What marks an edge of a box that scrolls while content lies beyond it, scrolled out of view past that edge. shadow: a band sys.scroll-edge.extent deep in the color of the surface the box stands on, full at the edge and none at the band's inner end, so that the content sinks into the surface. fade: the content itself fades out over the same depth toward the edge, so that whatever lies behind it — a transparent surface, a picture, a video — shows through. line: a hairline along the edge. blur: the content blurred in a band sys.scroll-edge.blur.extent deep, most at the edge. A platform that cannot blur what lies behind draws shadow, the first value; with a person's own forced colors every choice is drawn as the line. Read by the scroll area through its own component token, so that a design system can set it apart; an instance can set its own.
生成自 tokens/sys/behavior.tokens.json
滚动区域通过自己的令牌 comp.scroll-area.scroll-edge 读取这个选择，因此设计系统可以让滚动区域与系统的选择不同。单个实例用 scrollEdge（Web 上为 scroll-edge）设置自己的值；默认值 auto 跟随令牌。默认系统绘制 shadow；m3-like 绘制 line，cupertino 绘制 blur，与它们原本的设计标示滚动边缘的方式一致。
| 设计系统 | scroll-edge |
|---|---|
tanrei | shadow |
cupertino | blur |
m3-expressive-like | line |
m3-like | line |
生成自 tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json
系统中有两个选择与滚动有关，它们回答的是不同的问题：
sys.behavior.divider-visibility决定固定区域的线条何时显示：应用栏的边缘、对话框的标题和操作区、面板的标题——内容在其下滚动时保持不动的部分。它可以始终显示，或者只在有内容滚动到它之外时显示。sys.behavior.scroll-edge决定用什么标示滚动框的边缘，即边外还有内容时：阴影、渐隐、线条还是模糊。
产品可以分别设置它们：例如一个标题线跟随滚动的对话框，旁边是沉入表面的列表。
滚动区域就是平台自己的滚动框，只是在边缘上叠加绘制了标示。滚轮、触控板、触摸、键盘、辅助技术和平台的滚动条都与在其他框中一样工作，滚动条也保持平台的外观。区域不添加自己的滚动、吸附或滚动条；它不对内部做任何布局，也没有填充、边框或圆角。内容的样式照常由你设定。
- 在布局中给区域尺寸：一个高度、网格中的一份、页眉和页脚留下的空间。区域会采用给它的尺寸。
- 只要区域所在的不是普通表面，就把阴影的颜色设为那个表面的颜色。
- 给它一个说明其内容的标签：“消息”“结果”“照片”。
- 不要在滚动边缘自己画分隔线、边框或渐变。请选择滚动边缘，这样它只在边外还有内容时出现，并与产品的其他部分一致。
- 不要在图片、视频或半透明表面上使用阴影。请使用渐隐。
- 一个屏幕上不要超过两条模糊边缘。
- 不要嵌套朝同一方向滚动的滚动区域。用户无法判断一次滑动会移动哪一个。
- 不要为了给标示腾出地方而隐藏平台的滚动条。标示说明还有更多内容；滚动条说明还有多少，而且它本身就是一个控件。
- 角色
region, only while the box is a focus stop of its own (SCA-10); otherwise none- 标注
- While the box is a focus stop it is a region named by label. The scroll edges are hidden.
- 最小目标
- 即使外观尺寸更小，点击区域也满足最小目标尺寸。 minimum 32px · pointer 44px · spacing 8px · touch 48px
键盘操作
| 按键 | 动作 |
|---|---|
| Tab | Moves focus into the content, or to the box itself while nothing inside takes focus and the content does not fit. |
| Arrow keys, Page Up, Page Down, Home, End, Space | Scroll the box while it has focus, as the platform scrolls any scroll box. |
备注
- Not interactive except as a scroll box: it has no target of its own, and its focus stop exists only so that a keyboard can scroll content that has nothing focusable (WCAG 2.1.1).
- Animation from interactions (WCAG 2.3.3): the scroll edge's fade is a change of opacity, not motion, and is still made at once where motion is reduced.
- A shadow or a fade lowers the contrast of the content it lies over, by design, only within its band and only while that content is scrolled toward the edge; the content is read at full contrast once it is scrolled into view.
生成自 specs/scroll-area.spec.json, tokens/sys/measure.tokens.json
- 当内容放不下、内部也没有可获得键盘焦点的元素时，框本身会成为焦点顺序中的一站，并作为以
label命名的区域（region）公开，使键盘能够滚动它（WCAG 2.1.1）。方向键、Page Up、Page Down、Home、End 和 Space 会像平台滚动任何框一样滚动它。 - 当内部有元素获得焦点，或内容放得下时，框不是焦点停靠点，也不公开任何角色：键盘会到达内容，内容在获得焦点时滚动到视野中。
- 焦点指示绘制在框的边缘内侧，位于所有标示之上，从不被标示淡化，并且只在键盘获得焦点时显示。
- 标示对辅助技术隐藏，在标示上的每一次按下、悬停和滚动都会传到其下方的内容。
- 边缘的标示会在短时间内渐入渐出，这是不透明度的变化而不是运动；在请求减弱动态效果时会立即出现。
- 在强制颜色模式下，每种形式都绘制为文本颜色的线条。
- 它没有自己的文字。当框是焦点停靠点时的空标签，以及未知的
scrollEdge或edges值，都会在调试构建中报告。
- 给它一个说明其内容的
label。用 Tab 键到达框的人会听到这个名称；没有名称时，他们只会听到这里有一个区域。 - 要预期带下面的内容是在滚动到视野中之后才被阅读，而不是在原处。阴影或渐隐会有意降低其下方内容的对比度，但只在带内，并且只在该内容朝边缘滚动时；内容一旦滚动到视野中，就恢复完整的对比度。
- 会自行变化的内容（实时更新的列表、新消息）请像在其他地方一样告知用户。区域不会播报滚动进来的内容。