# 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.

## Playground

```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

### 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

Do

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.

## Accessibility

-   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.