Scroll area

Hidden scrollbar; feathered top and bottom edges.

Alkmaar

Amsterdam

Delft

Eindhoven

Groningen

Haarlem

Rotterdam

Utrecht

List

Towns on the sheet

The list is longer than the cell. Edges feather.

Alkmaar

Amsterdam

Delft

Haarlem

Rotterdam

Utrecht

Install

npx @noordvc/raster-cli add scroll-area

Markup

<div class="rs-scroll" style="max-height:140px" tabindex="0"><p>Alkmaar</p><p>Amsterdam</p><p>Delft</p><p>Eindhoven</p><p>Groningen</p><p>Haarlem</p><p>Rotterdam</p><p>Utrecht</p></div>

React

import { ScrollArea } from "@/components/raster/scroll-area";

<ScrollArea maxHeight={240}>
  {cities.map((city) => <p key={city}>{city}</p>)}
</ScrollArea>

Classes

.rs-scroll