ScrollBox

Element with scrollable content


import { ScrollBox } from '@ensdomains/thorin'

<ScrollBox style={{ height: '100px' }}>
  <Typography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus
    posuere lacinia. Proin mollis nisl a lacus mollis, a volutpat tortor
    consectetur. Vivamus mattis augue eu nulla molestie, a euismod nunc
    placerat. Fusce vitae elit sed dolor auctor faucibus luctus condimentum
    risus. Aenean pharetra mauris sodales ligula sodales, a tristique magna
    rhoncus. Fusce sit amet arcu suscipit, molestie dolor nec, blandit ipsum.
    Sed sodales blandit elit eget ultrices. Aliquam non blandit lacus. Etiam
    eget tellus vitae risus vestibulum pulvinar at a nibh. Orci varius natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam
    volutpat elit odio. Fusce placerat nibh nec ante aliquam, id dictum turpis
    tempor. Sed maximus quam ut ipsum blandit, vel lobortis neque venenatis.
    Maecenas dignissim massa nec risus vestibulum bibendum. Duis malesuada, est
    dapibus porttitor aliquet, massa arcu fermentum nunc, nec feugiat erat magna
    viverra orci. Suspendisse eu ultrices mauris. Aliquam scelerisque mollis
    orci id volutpat. Nunc ac vestibulum odio, vitae feugiat ligula. Nunc
    lacinia nisi in gravida volutpat. Vivamus dui ex, ornare ut ante vel,
    dapibus tempor est. Proin congue sapien non dolor hendrerit, in dignissim
    risus scelerisque. Pellentesque quis egestas ex. Suspendisse quis diam nec
    dui sagittis sollicitudin. In hac habitasse platea dictumst. Vestibulum
    vestibulum dignissim tincidunt. Donec congue nibh lectus, nec facilisis
    tortor tempus sit amet. Phasellus varius mattis metus porta posuere. Integer
    posuere dapibus libero. Maecenas euismod sem sed blandit consectetur.
  </Typography>
</ScrollBox>

Props
#

name	type	default	description
alwaysShowDividers	false \| true \| { top?: boolean \| undefined; bottom?: boolean \| undefined; }	false	If true, the dividers will always be shown
bottomTriggerPx	number	16	The number of pixels above the bottom of the content where events such as showing/hiding dividers and onReachedTop will be executed
hideDividers	false \| true \| { top?: boolean \| undefined; bottom?: boolean \| undefined; }	false	If true, the dividers will be hidden
horizontalPadding	"auto" \| "0" \| "px" \| "0.25" \| "0.5" \| "0.75" \| "1" \| "1.25" \| "1.5" \| "1.75" \| "2" \| "2.5" \| "3" \| "3.5" \| "4" \| "4.5" \| "5" \| "5.5" \| "6" \| "7" \| "7.5" \| "8" \| "8.5" \| "9" \| "10" \| "11" \| "12" \| "13" \| "14" \| "15" \| "16" \| "18" \| "20" \| "22.5" \| "24" \| "26" \| "28" \| "30" \| "32" \| "36" \| "40" \| "44" \| "45" \| "48" \| "52" \| "56" \| "60" \| "64" \| "72" \| "80" \| "96" \| "112" \| "128" \| "144" \| "168" \| "192" \| "224" \| "256" \| "288" \| "320" \| "1/4" \| "1/3" \| "1/2" \| "2/3" \| "3/4" \| "full" \| "fit" \| "max" \| "min" \| "viewHeight" \| "viewWidth" \| "none"	-	The amount of horizontal padding to apply to the scrollbox. This will decrease the content area as well as the width of the overflow indicator dividers
topTriggerPx	number	16	The number of pixels below the top of the content where events such as showing/hiding dividers and onReachedTop will be executed
onReachedTop	() => void	-	A callback function that is fired when the content reaches topTriggerPx
onReachedBottom	() => void	-	A callback function that is fired when the content reaches bottomTriggerPx

Edit on GitHub

Props#

Props
#