charcell 0.1.0
navigation
linksgithubnpm
mode

ScrollArea

content that scrolls a whole row at a time, with a scrollbar drawn in cells.

usage

example

code

import { ScrollArea } from 'charcell/react';

export function ScrollAreaExample() {
  return (
    <div style={{ display: 'grid', height: 'calc(var(--charcell-row) * 8)' }}>
      <ScrollArea overscroll="none" label="everyone on highway 9" fill>
        <div style={{ whiteSpace: 'pre' }}>01 ben throttle</div>
        <div style={{ whiteSpace: 'pre' }}>02 maureen corley</div>
        <div style={{ whiteSpace: 'pre' }}>03 malcolm corley</div>
        <div style={{ whiteSpace: 'pre' }}>04 adrian ripburger</div>
        <div style={{ whiteSpace: 'pre' }}>05 bolus</div>
        <div style={{ whiteSpace: 'pre' }}>06 nestor</div>
        <div style={{ whiteSpace: 'pre' }}>07 suzi</div>
        <div style={{ whiteSpace: 'pre' }}>08 father torque</div>
        <div style={{ whiteSpace: 'pre' }}>09 darrel</div>
        <div style={{ whiteSpace: 'pre' }}>10 emmet</div>
        <div style={{ whiteSpace: 'pre' }}>11 todd newlan</div>
        <div style={{ whiteSpace: 'pre' }}>12 miranda wood</div>
        <div style={{ whiteSpace: 'pre' }}>13 quohog</div>
        <div style={{ whiteSpace: 'pre' }}>14 horace</div>
        <div style={{ whiteSpace: 'pre' }}>15 mavis</div>
        <div style={{ whiteSpace: 'pre' }}>16 the chief</div>
        <div style={{ whiteSpace: 'pre' }}>17 officer floyd</div>
        <div style={{ whiteSpace: 'pre' }}>18 ricky myran</div>
        <div style={{ whiteSpace: 'pre' }}>19 uncle pete</div>
        <div style={{ whiteSpace: 'pre' }}>20 little todd</div>
        <div style={{ whiteSpace: 'pre' }}>21 doreen schmorley</div>
        <div style={{ whiteSpace: 'pre' }}>22 the unknown avenger</div>
        <div style={{ whiteSpace: 'pre' }}>23 the boom-boom brothers</div>
        <div style={{ whiteSpace: 'pre' }}>24 professor schmetterling</div>
        <div style={{ whiteSpace: 'pre' }}>25 a cavefish</div>
        <div style={{ whiteSpace: 'pre' }}>26 a vulture</div>
        <div style={{ whiteSpace: 'pre' }}>27 a rottwheeler</div>
        <div style={{ whiteSpace: 'pre' }}>28 the derby announcer</div>
        <div style={{ whiteSpace: 'pre' }}>29 the news anchor</div>
        <div style={{ whiteSpace: 'pre' }}>30 mrs. corley</div>
        <div style={{ whiteSpace: 'pre' }}>31 the factory guard</div>
        <div style={{ whiteSpace: 'pre' }}>32 ben throttle</div>
        <div style={{ whiteSpace: 'pre' }}>33 maureen corley</div>
        <div style={{ whiteSpace: 'pre' }}>34 malcolm corley</div>
        <div style={{ whiteSpace: 'pre' }}>35 adrian ripburger</div>
        <div style={{ whiteSpace: 'pre' }}>36 bolus</div>
        <div style={{ whiteSpace: 'pre' }}>37 nestor</div>
        <div style={{ whiteSpace: 'pre' }}>38 suzi</div>
        <div style={{ whiteSpace: 'pre' }}>39 father torque</div>
        <div style={{ whiteSpace: 'pre' }}>40 darrel</div>
      </ScrollArea>
    </div>
  );
}

as text

at rest
01 ben throttle        ▴
02 maureen corley       
03 malcolm corley       
04 adrian ripburger     
05 bolus               ▾
vertical bar hover
01 ben throttle        ▴
02 maureen corley       
03 malcolm corley       
04 adrian ripburger     
05 bolus               ▾
step hover
01 ben throttle        ▴
02 maureen corley       
03 malcolm corley       
04 adrian ripburger     
05 bolus               ▾
horizontal bar hover
01 ben throttle        ▴
02 maureen corley       
03 malcolm corley       
04 adrian ripburger     
05 bolus               ▾
press
01 ben throttle        ▴
02 maureen corley       
03 malcolm corley       
04 adrian ripburger     
05 bolus               ▾

props

scrolling'stepped' | 'fluid'= 'stepped'
stepped paints the content at whole rows and columns; fluid as the browser scrolls it.
scrollbar'cells' | 'hidden' | 'native'= 'cells'
cells draws the scrollbar in cells; hidden draws none; native leaves the browser's.
orientation'vertical' | 'horizontal' | 'both'= 'vertical'
The axes that scroll.
overscroll'auto' | 'contain' | 'none'= 'auto'
contain keeps a scroll at the end from moving the page; none also stops the platform's bounce.
labelstring
The region's accessible name.
focusableboolean= true
A named region and a tab stop; false inside a widget that keeps focus itself, as a listbox or a menu, whose active item the area keeps in view.
contentPropsobject
The attributes of the element that holds the content, for a widget the area sits in whose role belongs on its items' own parent (a menu's, a listbox's), so nothing of the area's comes between them. The element draws no focus cue: the widget's active item carries the keyboard position.
fillboolean
Takes the container's box: grows in a flex or grid layout, and takes the full height of a block that has one.

slots

in react, the default slot is children and each named slot a prop of its name, a function where the slot hands values; in vue, a slot; in svelte, a snippet.

default
The content that scrolls.