ScrollFade

The bottom edge of a scrolling box fades into the paper, like a sheet that continues. It signals more content; at the end, it disappears.

On this page

Playground

Reminder 1: every week, 8h.

Reminder 2: every week, 9h.

Reminder 3: every week, 10h.

Reminder 4: every week, 11h.

Reminder 5: every week, 12h.

Reminder 6: every week, 13h.

Reminder 7: every week, 14h.

Reminder 8: every week, 15h.

Reminder 9: every week, 16h.

Reminder 10: every week, 17h.

Content

Background

HTML

<div class="scroll-demo" id="pg-scroll" tabindex="0"><div class="scroll-demo-content"><p>Reminder 1: every week, 8h.</p><p>Reminder 2: every week, 9h.</p><p>Reminder 3: every week, 10h.</p><p>Reminder 4: every week, 11h.</p><p>Reminder 5: every week, 12h.</p><p>Reminder 6: every week, 13h.</p><p>Reminder 7: every week, 14h.</p><p>Reminder 8: every week, 15h.</p><p>Reminder 9: every week, 16h.</p><p>Reminder 10: every week, 17h.</p></div><span class="feitio-scroll-fade" aria-hidden="true"></span></div>

When to use

At the end of every area that scrolls and may hide content: the screen, a Drawer’s body, a fixed-height list.

When not to use

In a box that never scrolls.
On top of an action at the end of the box: the action goes in a footer outside the scroll.

Examples

Reminder 1: every week, 8h.

Reminder 2: every week, 9h.

Reminder 3: every week, 10h.

Reminder 4: every week, 11h.

Reminder 5: every week, 12h.

Reminder 6: every week, 13h.

Reminder 7: every week, 14h.

Reminder 8: every week, 15h.

Reminder 9: every week, 16h.

Reminder 10: every week, 17h.

Reminder 11: every week, 18h.

Reminder 12: every week, 19h.

Reminder 13: every week, 20h.

Reminder 14: every week, 21h.

In a scrolling box

Scroll inside the box. The scrolling box has no padding; the padding goes on the content inside it.

Show code

HTML

<div class="caixa-que-rola">                                   <!-- sem recuo -->
  <div class="conteudo">…</div>                                 <!-- o recuo fica aqui -->
  <span class="feitio-scroll-fade" aria-hidden="true"></span>   <!-- sempre o último -->
</div>

Do and don’t

The fade in the box’s background color.

It looks like the sheet continuing.

Don’t

A blurred shadow at the bottom, or a blinking arrow.

Blurred shadows are not Feitio, and a blinking arrow is noise.

It is visual only (aria-hidden="true").

Attributes

Attribute	Values	What for
`class="feitio-scroll-fade"`	last child	The fade pinned to the bottom edge.
`--feitio-scroll-fade-to`	a Feitio color	The background color, when it is not `surface`.
`--feitio-scroll-fade-bleed`	a padding	Goes over a block’s padding, edge to edge.