Skip to content

ScrollBox

Element with scrollable content
import { ScrollBox } from '@ensdomains/thorin'
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.
<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
bottomTriggerPx
number
16
hideDividers
false | true | { top?: boolean | undefined; bottom?: boolean | undefined; }
false
topTriggerPx
number
16
onReachedTop
() => void
-
onReachedBottom
() => void
-
Edit on GitHub